Accordians
Accordions organise information into expandable sections, helping users view only what they need without scrolling through long pages.
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.
When expanded, the accordion reveals:
Tables
Lists
Actions
Search bars
Additional filters or controls
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.
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.
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.
Last updated