Overview
The "FAQ/Accordion" section and element is a great way to make your content-heavy pages appear less so. This section is made up of multiple items containing a head/title and body with expanded text, image and other content. The accordion gives a way for you and your brand to get creative with design. It's perfect for an FAQ page or FAQ section on a page.
It can also be used as Menus or content which might behave cleaner using expandable sections. The point is to organize content in a way that makes navigation simpler for the page visitor, besides endless scrolling.
This section can be found in the "Text" section of the section library, or by searching for "FAQ" in the search bar:
A new FAQ/Accordion element can also be added to any existing section on the page by clicking on the "add element" button above/below an existing element and selecting the "FAQ" element:
FAQ/Accordion Settings
To access the Settings of the FAQ/Accordion element, click on the "Accordion✏️" button in the top-left of the section after it's been added. That will open the "Accordion" settings section in the left sidebar navigation where you can edit the appearance and question content:
In the "Items" tab you can:
Click the "+ Add New Item" button to add additional tab items
Collapse/Expand the item Title field for editing
Delete a tab item
Rearrange tab items via drag and drop
In the "Layout" tab of the accordion settings you can:
Choose between 3 different layout styles depending on the style you want used
Set the Font styles, Icon Type, Accordion Width and Question Height settings you'd like used
Set the Inactive State Font + Icon colors
Set the Hover/Active State Font + Icon colors
Adding Content to an Answer Section
Text, Images, Video and any other content you may want to use can be included in each answer section of the accordion.
To add additional content, click on the "Text" element in an answer section which is included by default.
Next, click on the blue ➕ sign above/below the text element, depending on where you want the new content added:
Select the new element to include in the answer section from the Elements Popup:
The new element will be added in the location chosen. To add additional elements and content, repeat the steps above:
Live Example
