An Expand/Collapse section is a vertically stacked list of headers that can be clicked to reveal or hide content. Expand/Collapse sections are useful for shortening long pages of content into broad, easy to scan topics. They are not useful if critical content would be hidden from a site visitor and only visible upon expansion.

Expand/Collapse sections are a good way to organize content with multiple parts in a page’s main content section. They are a good choice instead of tabs when you have a lot of items (three or more) or the items have longer labels, e.g. an FAQ section where the label is the question. To add a Expand/Collapse Container, click the + button in a column and select Expand/Collapse Container from the popup window.

Once the container is added to the page, click the + button inside it and add a Expand/Collapse Item.

To edit existing expand/collapse items, hover over the block and click the edit button from the context menu.

The Expand/Collapse Item contains the following fields:

  • Title: the text that will be used as the label of the section
  • Content: a full-featured WYSIWYG editor for the content inside the accordion.

The Expand/Collapse Container only has a custom class field, which you should not need.

In addition to editing the contents, the context menu allows you to move the custom accordion item or container to a different location in the layout, copy a block and its contents, or delete the block.

Once you are finished making changes, click Publish or Update on the right side of the page to make your changes live.


  • Example Item 1 Title
    Example Item 1 Content…
  • Example Item 2 Title
    Example Item 2 Content…
  • Example Item 3 Title
    Example Item 3 Content…