An accordion section is a list of headers you can click to expand or collapse details. The details of the headers are all in text format, and they can be rearranged / re-ordered in the site editor.
Site collaborators can use this section to reveal or hide the details of the headers as the site visitors click on them. Common use cases where accordion sections would work best are FAQs and glossaries.
Parts of an accordion
The part usually visible in an accordion is called label, while the part that appears after the label has been clicked is called content.
In the video below, the accordion example shows the headers as would-be questions (FAQs) or terms, while the details are the answers to the questions or the definition of the terms.
Accordion section overview
Accordion sections highlight important content in the headers and allow quick access to the associated content or header details by expanding the panel. This section type is very useful for rendering content on smaller screens through the stacked headers.
Create an accordion section
To create an accordion section:
Click +Section, and select Text from the left pane.
Select Accordion.
Duplicate an accordion item
Each accordion has a panel and its content, with these combined an accordion item is formed. You can duplicate an accordion Item to retain the same format in the accordion section, instead of fixing the format of the accordion item one by one.
To duplicate an accordion item:
Select the accordion section in your Site Editor.
In the left navigation bar, look for the accordion item that you wish to duplicate.
Click the Duplicate icon in the right of the accordion item.
The duplicate accordion item will appear in the bottom of the list.
Automatically expand the first panel of an accordion section
By default, all panels associated with the panels/headers are collapsed or hidden when rendered on a page. Viewers can click the expand icon to see the panel for the header. Zoomforth allows the first header to automatically expand upon page load in the site editing interface.
To automatically expand the first panel of an accordion section:
Navigate to the target accordion section;
Click the accordion section;
Under the Behavior section in the left editing menu, tick the box for First item open by default;
Click Done Editing Section.
Expand only one accordion panel at a time
To set an accordion to expand only one panel at a time:
Navigate to the target accordion section;
Click the accordion section;
In the left editing menu, tick Only one item open at a time, under the Behavior section;
Click Done Editing Section.