Accordion

The accordion paragraph organizes your content into vertically stacked tabs. Each tab includes a title and can be expanded (opened) to reveal the content associated with that tab. In Drupal, these tabs are called Accordion Items.

The Accordion Paragraph is used often to display FAQs as well as organize information on nodes with extensive content.


Example of an Accordion

Below is what an Accordion looks like on the live Delta College Website. Note that there is no limit to how many Accordion Items can be used, though we recommend not using more than approximately ten.

This is the 'Heading' of the Accordion Group
Title of Accordion Item 1

This is the Body of Accordion Item 1. 

Title of Accordion Item 2

This is the Body of Accordion Item 2.

Title of Accordion Item 3

This is the Body of Accordion Item 3.


Editing Accordions

When expanded, the Accordion Paragraphs have three types of fields that you can edit:

Heading

  • On the live site, the heading will appear above all the accordion tabs.
  • There's only one heading for each group of accordion tabs.
  • The heading is optional. If left blank, nothing will appear before the Accordion items. 
  • To edit the heading, simply change the text in the field under heading

Accordion Item Title

Under each Accordion Item, there is a title field. This is the title of the accordion tab. To change the title, simply change the text in the text field under Title.

Body

The Body of the Accordion Item is the content in the expanded view of a tab (i.e. what you see when you click on the tab on the live site). The Body is the same as a standard body region. Content can be added/removed, and you can apply styles, links, add images, etc. 

Regions in an Accordion


Adding and Removing Accordions

Adding a New Accordion Item

To add another tab to your accordion:

  1. Scroll to the bottom of the last accordion item
  2. Click the Add Another Accordion Item button
  3. Add your title and content to the new fields
  4. Repeat this process to add additional tabs.

Remove an Accordion Item

To remove an accordion item, click the Remove button underneath the item you wish to delete. Once clicked, you will see the following warning message:

This Paragraph has been removed, press the button below to restore.

Warning: this Paragraph will actually be deleted when you press "Confirm Deletion" or "Save"!

You can either click Confirm Deletion or save your node as a draft to permanently remove the item.  Removing an accordion item will also delete any content you had in the Title or Body of that item.

If you clicked remove by accident, click the Restore button to bring the item back. Note, restoring will not be available once the node is saved.

When deleting an accordion item, be sure not to accidentally remove the entire accordion (i.e. all items) by clicking the remove button to the right of collapse at the end of all the accordion items. 

Adding and removing accordions


Rearrange the Order Accordion Items

You can change the order of the Accordion Items on the live site by dragging and dropping the items into a new order or using the row weights. Learn more about how to rearrange paragraph items order.