Accordion blocks

Accordion blocks

false

Accordion blocks

Last updated July 29, 2026 20:34

Display large chunks of text in collapsible sections to help visitors navigate text-heavy content.

Use accordion blocks to display text content in collapsible sections. This is a great option for structured, text-heavy pages like FAQs or product offerings. Accordion blocks help keep your page short and reduce scrolling for your visitors.

Watch a video

How accordion blocks work

Visitors to your site see the accordion block as a list of titles alongside expand icons. Depending on your design settings, the first item may be expanded by default.

Visitors click each title to open its description text. Each accordion block can only have one item expanded at a time. If your visitors click an expanded item, it collapses. If they click an item when another item is already expanded, the previously expanded item closes.

Add an accordion block

To add an accordion block:

Edit a page or post.
Hover over the section and click Add block or + to open the block menu, then click Accordion.
Open the block editor by clicking the pencil icon on the block.
In the Content tab, add and edit items in the accordion block. Each item includes title text, which always displays, and description text, which displays when the item expands.
In the Design tab, style the accordion block's appearance.
Click outside the block editor when you're done. Your changes save automatically.

Add and edit items

In the Content tab:

Click an item in the list to edit the title and description
Click Add Item to add a new item
Click and hold an item to rearrange it
Hover over an item and click the trash can icon to delete it

When you open an item, you'll see more options:

Edit title text in the Title field
Edit description text in Description field
Click Duplicate to create a copy of the item
Click Delete to delete the item

Style the accordion block

In the Design tab, you can style the block's text, layout, appearance, and icon:

Click Title to set the format and alignment of the title text.
Click Description to set the format and alignment of the description, along with other options like:
Width, which sets the width of the text.
Padding, which sets the amount of white space around the text.
Alignment, which sets what direction the text is aligned.
Placement, which sets where the text is placed in the block.
Enable Expand first item to have the first item expanded by default.
Enable Allow multiple open items to prevent one item from closing when another one opens.
Click Dividers to style the lines dividing each item, or disable them.
Click Icon to set the expand icon as an arrow or a plus sign.
Below Icon, set Icon Size, Icon Thickness, and Icon Placement.
Set Row padding to change the amount of white space around each item.
On version 7.1 sites, switch the Background color toggle on to add color background to the block, set corner radiuses, and change background padding. Block background colors aren't supported on version 7.0.
Beside Stroke, enable a solid or dotted line outlining the block. For both solid and dotted lines, set the stroke Color and Thickness.
Click the Blend Mode dropdown menu to choose a transparency setting. These effects are ideal if you're overlaying an accordion block in front of an image or other visual content.
To blur either the Element or Backdrop, switch the toggle on beside Blur and use the slider to adjust the level of blurriness.

Stroke, Blend Mode, and Blur customizations are available for Fluid Engine sections. For sections using the classic editor, only Stroke is available.

Text font and color

The text font and color follow your site styles settings. Keep in mind, changing these settings affects all elements on your site with the same settings:

In the Design tab of the accordion block, set the titles to follow one of your site-wide heading or paragraph styles, then customize that style in the Fonts panel.
In the Design tab of the accordion block, set the description text to follow one of your site-wide paragraph styles, then customize that style in the Fonts panel.
In the Colors panel, accordion block titles and descriptions follow the Heading or Paragraph color tweaks matching the formatting in the Design tab of the accordion block. If you have a background enabled on the block, they follow the Heading on Background or Paragraph on Background color tweaks.

Other colors

In the Colors panel, use the tweaks under Accordion Block to change the divider color, icon color, and default background color.

Was this article helpful?

Yes No

182 out of 369 found this helpful

Yes No

Accordion blocks