Custom Accordions

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

Custom accordion sections (expanding / collapsing subsections) are a good way to organize content with multiple parts in a page’s main content section. Custom accordions 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 custom accordion container, click the + button in a column and select Custom Accordion Container from the popup window.

Once the container is added to the page, click the + button inside it and add a Custom Accordion Item.

To edit existing custom accordion items, hover over the block and click the edit button from the context menu.

The custom accordion item contains two fields:

• The accordion title is the text that will be used as the label of the accordion.
  • Headings should be brief but descriptive and must fit on one line.
• The content field is a full-featured WYSIWYG editor for the content inside the accordion.

The custom accordion 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.