Accordion

Accordions display collapsible content panels for presenting information in a limited amount of space. Accordions help users see only the content they need, while everything else is easily accessible.

Usage considerations:

• Try to limit the number of panels in an accordion by categorising information into smaller, digestible chunks. This will assist your users in scanning and comprehending the content.
• Remember to structure textual content correctly in accordions, e.g. use heading tags where appropriate.

Note that accordion v2 enables you to change the order of your accordion items using drag and drop.

Accordion v1 does not have this functionality. If you need to delete an item or change the order of your items, you must manually copy and paste the content in the order you want.

Accordion v1 (supports up to 9 panels)

Example demo

Instructions

1. Create a standard page asset.
2. Select  (+), then select  Accordion (9 sections max) from the custom component list in the Add a component menu.
3. From the configuration options, select:
   1. Number of panels: up to 5 panels can be selected to display per accordion.
   2. Accordion label: Provide a label for your accordion to help screen readers to get the context.
   3. Display Expand all/Collapse all option: This provides the functionality to expand/close all the panels in the accordion.
4. Fill the content in the panels:
   1. Icon in the panel header: Select an image if you want to display an icon in the header (optional).
   2. Id for panel: Provide a unique identifier to your panel. This provides the ability to direct link to each panel and expand the linked panel. Example: https://URL_TO_PAGE/#ID_FOR_PANEL
      1. Standard for id
   3. Title: Header of the panel.
   4. Subtitle: Header of the panel to provide context to the hidden content.
   5. Content in panel: Content that will be shown on expanding a panel.

---

Accordion v2 (supports any number of panels)

Example demo

1. Create a standard page asset.
2. Select  (+), then select  Accordion (unlimited sections) from the custom component list in Add a component menu.
3. Create a folder for Accordion as a subfolder for standard page and link that as a 'Root Node'.
   
4. Create 'News items' assets as accordion panels inside the Accordion folder.
   
   
5. Open the Details screen for each news item and complete these fields:

   • News Headline (the accordion panel heading)

   • Summary (the Accordion panel subtitle) - optional

   • Body (the Accordion panel description).
     
     

6. In the Display section, deselect the items you don't want to be displayed. Usually these are the summary, contact name, phone number and email address.
   
7. Preview the accordion page you created in step 1 to check the accordion items are displaying correctly.
   
   

---

Resources

• Create a standard page
• Applying templates to content containers