How to Use the Accordion Block

The Accordion block allows you to efficiently organize and present information-rich content on your website. You can use the Accordion block to display FAQs, manage various types of information, or create interactive content.

Accordion Block Structure

The Accordion block consists of two Inner Columns:

• First Inner Column: This column contains the Icon Label block, which contains the Heading and Icon block.
• Second Inner Column: This column contains the Text block by default. This is the space where you can elaborate on the subject matter.

Open and Close Accordion Settings

In the Style tab of the Accordion block, you will find the settings to control the opening and closing behavior of the Accordion block.

• Open at the start: This option allows you to determine whether the accordion should be open or closed by default when someone visits your page. Toggle on 'Open at the start' to display the content immediately, or toggle it off to hide it initially.

• Close adjacent on open: With this option, you can choose whether other accordion rows automatically close when a new one is opened.

Choose Icons on Open and Close

In the Style tab of the Icon block, you can customize the icons for when the Accordion is open and closed. This simple yet effective feature adds a touch of interactivity to your Accordion block.

Customize Colors in Collapsed State

You can customize the colors of the Accordion block in the Collapsed state.

Click on the pointer icon next to each color option below, and select “Collapsed” to change the colors in the Accordion block’s collapsed state.

• Background Color

• Heading and Text Color

• Icon Color