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 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 with 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 than endless scrolling.

This block can be found in the "Content" section of the block library: 

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: 

Layout

There are 3 different layout options to choose from depending on the style you want used.

Font

Edit the font type, font size, and font styles of the "question" text.  

Styling

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 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 new accordion sections 
  • Re-arrange the sections using drag and drop
  • Delete sections which are no longer needed

Live Example 

Did this answer your question?