> For the complete documentation index, see [llms.txt](https://docs.cloudscaff.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cloudscaff.com/general-tools-and-features/accordians.md).

# Accordians

<div align="left" data-with-frame="true"><figure><img src="/files/8OiTmQ6iEsEVtQSvhTxh" alt=""><figcaption></figcaption></figure></div>

## What Are Accordions

Accordions are expandable panels used throughout Cloudscaff to organise information into structured sections.

Instead of displaying all data at once, accordions allow users to open and close specific sections as needed.

This design keeps pages clean, easy to read, and simple to navigate, even when large datasets or multiple categories of information exist.

Screenshot Placeholder: Example of Collapsed and Expanded Accordions

***

## Purpose of Accordions

The main purpose of accordions is to prevent users from being overwhelmed by long tables, large lists, or excessive scrolling.

Accordions help users:

* Navigate information faster
* View only the sections they need
* Reduce clutter on screen
* Focus on one item or category at a time
* Move between categories without losing their place

This improves usability on both desktop and mobile.

***

## How Accordions Work

Each accordion has a header that displays its name and a count of how many items it contains. Clicking the drop-down arrow on the right of the accordion header expands the section. Clicking it again collapses it.

<div align="left" data-with-frame="true"><figure><img src="/files/uR89ltnB3sNmofSa2E3I" alt="" width="563"><figcaption></figcaption></figure></div>

When expanded, the accordion reveals:

* Tables
* Lists
* Actions
* Search bars
* Additional filters or controls

<div align="left" data-with-frame="true"><figure><img src="/files/rQ9BSxGL8fJLoaTU7HWO" alt=""><figcaption></figcaption></figure></div>

When collapsed, the content is hidden, and only the header remains visible.

***

## Status Counts

Accordions often display a number next to the label. This number shows how many items exist inside that section, allowing users to see activity at a glance without opening each one.

<div align="left" data-with-frame="true"><figure><img src="/files/r3sLsyvIJUKP6ceyY4Ay" alt="" width="563"><figcaption></figcaption></figure></div>

Example: Completed Deliveries has 1 document stored within it

***

## Why Accordions Are Used

Cloudscaff uses accordions because they:

* Make large datasets easier to manage
* Keep interfaces clean and structured
* Help users find information faster
* Work well on all screen sizes
* Reduce unnecessary scrolling

Even if a system contains hundreds of records, accordions keep the interface simple and efficient.

***

## Permissions and Visibility

Some accordions are permission-based.

If a user does not have access to a function, the corresponding accordion will not appear in their view.

{% hint style="info" %}
[Learn about Roles and Permissions](/settings/user-management/role-builder-add-or-update-roles.md)
{% endhint %}

***

## Summary

Accordions are a core part of Cloudscaff’s user interface. They organise data into expandable sections, keep pages clean, and ensure users can quickly locate the information they need without navigating long pages or overwhelming lists.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.cloudscaff.com/general-tools-and-features/accordians.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
