Making Accordion in Drupal

Accordions

What are accordions?

Accordions are a way to save space, condense information, and separate content into categories.

They consist of a navigation bar, which contains the title, heading, or label, and the body, which contains the bulk of the text. When the navigation bar is clicked, the body text will ‘open’ and appear. Clicking the bar again will ‘close’ the accordion, and the information will fold back up.

Making an accordion in Drupal

Note: you must be a Senior Unit Editor to create or edit an accordion. To receive higher permissions or receive assistance editing a page with accordions, please email webhelp@umn.edu

  1. Locate the page that you want to create the accordion in, and open that page in the WYSIWYG editing mode  

  2. Find the accordion button under “additional components”

  3. Click on the “add accordion” button

  4. Click on the “add new panel” button, and a panels box will open

  5. Fill out the heading and body text of the accordion (which will be the title and and body text of the accordion)

  6. Click “add another panel” if you would like to add another navigation bar to your accordion

  7. Click save to view your new accordion