Overview
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:
Accordion Settings
To edit the Appearance of the FAQ/Accordion Block, click on the "Accordion✏️" button in the top-left of the block 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 of the block:
Items
In the "Items" section of the accordion settings, you can edit the text content for each question text (1), add an image or video to each answer text (2), add new Q&A items (3), delete existing Q&A items (4) and drag and drop Q&A items into different positions (5):
📝Answer text can be edited directly in the page builder using the inline text editor:
If an image or video is added, then a "Layout" section becomes available where you can choose to have the image or video above/below the answer text depending on your layout preference:
📝The image added will have all settings available for the Image Element including Hover States, Borders, and Destinations.
Layout
In the "Layout" tab of the accordion settings, there are 3 different layouts (1) to choose from depending on the style you want used, as well as Font (2), Inactive State (3) and Active State (4) settings:
Font
In the "Font" section you can edit the font type, font size, and font styles of the "question" text (1). You can also choose an icon type (2), set the accordion width (3), and the question height (4):
Inactive State / Active State
In the Inactive State and Active State sections, you can choose the colors you want shown for each state:
Inactive State Colors - The colors you want displayed by default on page load.
Hover / Active State Colors - The colors you want displayed when the cursor is hovered over the question text.
For each color state, you can either enter an exact color hex code (1) or use the handy color picker (2) to choose a color instead:
Live Example
