The Accordion widget is perfect for FAQ sections, pricing interfaces, and when information needs to be divided into sections. It allows you to have collapsible sections and customize their look and feel.
To insert an accordion while building a page, click on the Accordion widget on the left-side menu. We recommend using accordions on Fluid Grid Blocks (more about them here: https://d.pr/Sy8qaM) so that the block height adjusts to expanding sections. You can see an example in the screenshot below.
If you add an Accordion to a Canvas Block (regular, fixed-size block), make sure you leave enough space at the bottom for the expandable content. The height will depend on the length of your copy and the size of the accordion itself.
Accordion Style
If the widget is placed on a Fluid Grid Block, you can define the container's margins.
If the widget is placed on a Canvas Block, you can define its position and size.
Accordion Settings
This section allows you to set the background color and arrow color, as well as the size and color of the section divider.
If you want there to be some spacing between the different collapsible sections, you can define that in the Spacing - Vertical field.
Text style
You can customize the style of the text content here - headlines and content (paragraphs) can be different from each other.
Sections
Here you can add the headlines for each section and increase or decrease their total. To add content, double-click on Content goes here.
As with all of our widgets, accordions can be visible on both Desktop and Mobile or only one of them. You can read more about desktop/mobile visibility here: https://d.pr/WFYoIn
You can right-click on an Accordion to duplicate, order, change visibility, or delete it.