Expand/Collapse Menus

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:

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

  • Expand/Collapse Title 1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel sapien malesuada, posuere nulla eu, consequat purus. Nullam quis dictum tellus. Vestibulum varius arcu gravida magna imperdiet, sed molestie diam hendrerit. Fusce ut velit at sapien ullamcorper pulvinar et id diam. In porttitor justo ullamcorper leo tincidunt, id molestie turpis malesuada. Proin rhoncus, mauris sit amet feugiat tristique, lorem nunc consequat augue, euismod viverra enim quam sed ipsum. In suscipit non tellus nec eleifend. Nulla iaculis purus quam. Aenean egestas, magna tempus suscipit semper, nisi ante ultricies nisl, eu lobortis orci turpis volutpat mi. In finibus dapibus arcu, nec blandit ante faucibus non. Curabitur molestie interdum dictum. Quisque euismod fermentum eros, sit amet egestas tortor iaculis ac.
  • Expand/Collapse Title 2
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel sapien malesuada, posuere nulla eu, consequat purus. Nullam quis dictum tellus. Vestibulum varius arcu gravida magna imperdiet, sed molestie diam hendrerit. Fusce ut velit at sapien ullamcorper pulvinar et id diam. In porttitor justo ullamcorper leo tincidunt, id molestie turpis malesuada. Proin rhoncus, mauris sit amet feugiat tristique, lorem nunc consequat augue, euismod viverra enim quam sed ipsum. In suscipit non tellus nec eleifend. Nulla iaculis purus quam. Aenean egestas, magna tempus suscipit semper, nisi ante ultricies nisl, eu lobortis orci turpis volutpat mi. In finibus dapibus arcu, nec blandit ante faucibus non. Curabitur molestie interdum dictum. Quisque euismod fermentum eros, sit amet egestas tortor iaculis ac.