Agencies
Services
Accordion
The Accordion is a component that allows for the creation of a collection of panels arranged in an accordion on a page.
The Accordion component allows for the creation of a collection of components, composed as panels, and arranged in an accordion on a page, similar to the Tabs component, but allows for expanding and collapsing of the panels.
Configuring the Items Tab
- Add as many items as needed, where each item will take up one panel.
- Insert a Container when adding a panel. This will give you the most flexibility to add additional components and adjust their layout.
- The name for each panel item will be displayed as the panel title.
Configuring the Properties Tab
- Single item expansion: When checked, only allows 1 panel item to be expanded at a time.
- Expanded Item/Expanded Items: Panel items that are selected will be expanded automatically on page load.
- Heading Element: Select the heading level for the panel names. Select from H2 to H6.
- Expand/Collapse All text: Configure the Expand All and/or Collapse All text labels, if needed. If left empty, those options will not show.
Selecting a Panel
There are 2 ways to select the active panel when authoring an Accordion.
- Use the Select Panel option on the component toolbar to change to a different panel for editing as well as to easily rearrange the order of the panels within the accordion (below).
- Selecting Preview will allow users to interact with the Accordion by clicking a panel's collapse or expand arrow to switch between panels and then switching back to Edit mode.
Examples
Default - Closed Upon Page Load
Content for Accordion 1.
Content for Accordion 2.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tab 1 Opened Upon Page Load
Content for Accordion 2.
Tab 1 and 2 Opened Upon Page Load
Accordions In Accordions
Content for Accordion 2.
Content for Accordion 2a.
Content for Accordion 2b.
Content for Accordion 3.
Content for Accordion 3a.
Content for Accordion 3b.
Accordions In Accordions - Single Expansion
Content for Accordion 2.
Content for Accordion 2b.
Content for Accordion 3.
Content for Accordion 3b.