Accordion Variant

The accordion content block variant allows you to generate an accessibility-compliant accordion on your page with one click. If you apply the accordion variant to multiple blocks that are next to each other on a page, each block becomes an item in a single accordion.

For example, this long page with 18 content blocks goes from this:

To this:

Multiple Accordions on a Page

If you have multiple blocks on a page and you intersperse accordion variants with other variants, each group of accordion blocks will act as a separate accordion. Our accordions are configured so that you can only open one accordion item at a time. If you open one item, then open a new item, the first item will close. In the example below, that behavior would apply separately to accordion 1 and accordion 2.

Accordion Blocks Have All of the Regular Block Features

The accordion block variant has all of the features of a standard block. You can have block text, different types of content, content variants, and content text.

In the example below, the block has block text with an embedded image, three link resources (one of which has content text), a title using the bio variant, a title using the default variant, and a program.