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 TitleExample Item 1 Content…
- Example Item 2 TitleExample Item 2 Content…
- Example Item 3 TitleExample Item 3 Content…