Simple 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 the Accordion (Simple) A collection of features or functionality that can be enabled on sites. WDS has made several optional modules available to site administrators to enable on their site. For example, the "News" module enables the News content type and provide a News List Block for displaying news on a page.

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

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.

More Advanced Alternative

The Accordion (Advanced) module provides a more advanced solution for displaying accordion items. This alternative is better suited if you have many items to display in an accordion or need to share accordion items across multiple accordions.

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.