Agencies
Services
Accordion
Description
The Accordion is a component that allows for the creation of a collection of panels arranged in an accordion on a page.
Authoring
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.
Adding the accordion to your page
- Accordions should be added to your page by placing them into their own container.
Configuring the Items tab
- Add as many items as needed, where each item will take up one panel.
- Adding a Container will give you the flexibility to add additional components and adjust their layout.
- The name for each item will be displayed as the panel title.
Configuring the Properties tab
- Enable single expansion if only one panel should be expanded at a time.
- Configure items to be opened upon page load, if any.
- Configure the panel title heading style. Select from H2 to H6.
- Configure the exand all and collapse all label. If left empty, those options will not show.
Selecting a panel
- 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.
- Tapping or clicking an entry in the dropdown, switches the view in the editor to that panel.
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.