Accordion

What is an accordion?

An accordion on a website is a vertical list of headings that can be clicked to reveal or hide content. They can help to break up content on a page, and should typically be limited to a paragraph or two in each accordion item to account for the vertical toggle functionality.

How to add an accordion block:

1. In the page edit view, add a new block called Accordion.
2. The following empty blocks will be placed: an Accordion block with Section Heading and Accordion Items blocks nested within.
3. In the section heading block, optionally fill out the Heading and Introduction fields or add Calls to Action links by clicking the plus icon in the lower right.
4. Fill out the first accordion item by adding a Heading, Body text, and optionally adding new blocks by clicking the plus icon on the lower right when the accordion item block is selected.
5. To add more accordion items, select the parent accordion items block, then click the plus sign at the lower right.
6. Select the outermost accordion block to show further configuration options in the block settings in the right sidebar:
   • Display: the option to display the accordion items as all open, all closed, or the first one open.
   • Behavior: When a site visitor opens another accordion item, this controls whether other accordion items they have opened stay open or automatically close.
   • Show Controls: the option to show the controls for the site visitor to open or close all accordion items
   • Change the width/alignment or color scheme.