Expand/Collapse Menu

Description

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