Accordion blocks

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

Last updated April 9, 2024

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.

Accordion_block.png

Accordion_block.png

Add an accordion block

To add an accordion block:

  1. Edit a page or post, click Add Block or an insert point, then select Accordion from the menu. For help, visit Adding content with blocks.
  2. Open the block editor by clicking the pencil icon on the block.
  3. 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.
  4. In the Design tab, style the accordion block's appearance.
  5. 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 SizeIcon 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.

Accessing this feature

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 Fonts panel, accordion block titles follow the Heading settings and the Heading 4 size. Accordion block descriptions follow the Paragraphs settings and the Paragraph 2 size.
  • In the Colors panel, accordion block titles follow the Heading (Small) tweak for the color theme. Accordion block descriptions follow the Paragraph (Medium) tweak.

Other colors

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

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.