Skip to main content

Accordion layout in Dash

About the Accordion layout, its settings, and its effect on Fields preferences (Plus only)

About

The Accordion layout organizes data into a vertically stacked list of items that can be expanded or collapsed. This layout is ideal for FAQs, course modules, or any dashboard where you want to provide a clean overview while allowing users to dive into details without leaving the page. By grouping items logically, it helps save vertical space and reduces cognitive load for the user.


Available settings in Layout preferences

The Accordion layout includes several specific configuration options in addition to the general layout settings:

  • Group by – Select the data field used to categorize the items into different accordion sections.

  • Group label – Define which field should be used as the visible title for each accordion group.


Available settings in Fields preferences

Selecting the Accordion layout provides a fixed-slot mapping system within the Fields preferences. This system allows you to assign specific data fields and icons to the corners of each accordion item:

  • Top left field – Choose the data field to appear in the upper-left corner.

  • Top left field icon – Select an icon to accompany the top-left data.

  • Top right field – Choose the data field to appear in the upper-right corner.

  • Top right field icon – Select an icon to accompany the top-right data.

  • Bottom left field – Choose the data field to appear in the lower-left corner.

  • Bottom left field icon – Select an icon to accompany the bottom-left data.

  • Bottom right field – Choose the data field to appear in the lower-right corner.

  • Bottom right field icon – Select an icon to accompany the bottom-right data.


Note: The specific fields available for selection are determined by the data source assigned to the block.

Did this answer your question?