Accordion Block

Accordions are a useful way of displaying various types of content, such as FAQs, with a collapse/expand behavior. Items in accordion groups will initially appear 'collapsed' with only their titles showing. Clicking an item's title will 'expand' that item to show its whole content.

Requires Accordion Module

Enable the Accordion Module to use this block on your site.

Then Add Blocks to the Page Layout.

Use if: 

  • Users only need a few specific pieces of content within a page.
  • Information needs to be displayed in a small space.

Consider something else if:

  • Visitors need to see most or all of the information on a page. Use well-formatted text instead with proper headings and bullets for easy reading.
  • There is not enough content to warrant condensing. Accordions increase cognitive load and interaction cost, as users have to make decisions about what headers to click on.

Usage

When adding an accordion block to a layout, you can enter one or more pairs of titles and content descriptions. The title is the clickable heading for the accordion item that, when clicked, will expand the content beneath it.

After adding an accordion item, use the "Add another item" button to add additional pairs.

Use the drag handles to re-arrange the order of items that were already added.

To remove an item, clear out the title and content values.

Add accordion content

It may become difficult to manage a large number of accordion items using the sidebar form. WDS is aware of these usability issues and is considering approaches to make the items easier to manage.