On this page
The "FAQ/Accordion" block is a great way to make your content-heavy pages appear less so. This block is made up of multiple items containing a head/title and body with expanded text and image 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 block can be found in the "Text" section of the block library, or by searching for "FAQ" in the search bar:
Editing the Appearance
To edit the Appearance of the FAQ/Accordion Block, click on the block within the page builder after it's been added. That will take you to the Appearance setting tab where you can edit the appearance of the block:
There are 3 different layout options to choose from depending on the style you want used.
Edit the font type, font size, and font styles of the "question" text.
In the styling section, you can edit the following:
Expand / Collapse Icons - The Icons that will be displayed to expand or collapse each section of the accordion.
Divider Style - Choose solid, dotted or dashed.
Line Width - The width (S/M/L) of the accordion section.
Line Height - The height (S/M/L) of the accordian section.
Inactive State Colors - The colors you want displayed by default.
Hover / Active State Colors - The colors you want displayed when the cursor is hovered over the accordion.
There is also an option to "Expand First Entry by Default". If checked, the first entry in your accordion block will be expaned by default when the page is landed on:
Editing the Content
To edit the Content of the FAQ/Accordion Block, click directly on the block within the page builder after it's been added. Then click into the Content setting tab where you can edit the content for each section of the block:
Here is where you can:
Edit your "Questions" and "Answers"
Add an Image to each "Answer" section
Add new accordion sections
Re-arrange the sections using drag and drop
Delete sections which are no longer needed
To add an image to any "Answer" section, click the "Add Image" button in the desired section.
The image added will have all Image settings including Hover States, Borders, and Destinations as well as a Layout setting, to choose if you want the image above or below the text content: