Accordion Component

← Return to the Drupal User Guide

The Accordion component allows you to create collapsible and expandable sections of content on your site.

Elements

1. Accordion Component - Title
   1. Toggle Show Title to set the visibility of the component title.
2. Accordion Item - Title
   1. Toggle Initial State to set the accordion item to Open or Closed on page load.
   2. Set Order to rearrange the display order of individual accordion items.
3. Accordion Item - Content

Figure: The Accordion component fields.

Examples

Interactive Example

The preview below shows the Accordion component using its default configuration.

To experiment with different layouts and other settings, open the interactive component playground.

Open Component Playground

Step-by-step Instructions

1. Add a Title for the accordion component. Toggle Show Title to control whether the component title is displayed.
2. Add an Accordion Item to the component:
   1. Add a Title.
   2. Toggle Initial State to determine whether the item displays as Open or Closed when the page first loads.
   3. Add text to the Content field. This will become the main body of the accordion item.
   4. Optionally, set an Order value to rearrange the display order of the accordion item. Lower values appear first.
3. Add as many additional accordion items as needed by clicking Add Accordion Item.