The Accordion block can be used to create an accordion-style display of collapsible content. An accordion allows users to toggle between hiding and showing content. Each accordion content is a section that can be expanded or collapsed by clicking the accordion title. The Accordion block can be useful for organizing content and making it easier to navigate.
Click on the accordion title to expand the associated accordion content.
Accordion content 1.
Accordion content 2.
A default Accordion block is built with an Accordion Item (Container) block, an Accordion Title (Button) block, an Accordion Content (Container) block, and a paragraph block:
Adding an Accordion Item
To add more Accordion Items in an Accordion, simply click the + icon in the toolbar when selecting any of the Accordion components:
Block Settings – Accordion
The Accordion Block Settings allow you to set certain attributes and styles to the accordions.
Keep Multiple Items Open
By default, when you click open one accordion item, the other accordion items collapse:
Accordion content.
Accordion content.
The Keep Multiple Items Open option allows you to keep multiple accordion items open at the same time.
Accordion content.
Accordion content.
Sync Accordion Item Styles
When this option is toggled, the style changes made to one of the accordion items/accordion titles/accordion contents will be synced to all accordion items/accordion titles/accordion contents. This option helps you work more efficiently.
Un-toggle the option if you want to add a unique style to individual accordion items/accordion titles/accordion contents.
Transition
This option allows you to add a transition effect when expand/collapse accordion items.
Accordion with transition set to None:
Accordion content.
Accordion with transition set to Slide:
Accordion content.
Accordion with transition set to Fade:
Accordion content.
Accordion Title Type
You can choose the accordion title to be either a simple Button or a Container with more advanced layout and style.
Accordion content.
Accordion content.
Block Settings – Accordion Item
The Accordion Item Block Settings allow you to set an Item open by default. For example, Accordion 1 is set to open by default:
Accordion content 1.
Accordion content 2.