Adding an Accordion Menu to your Website
Permission Level
Level 2 or Higher - See permission level document for details
Purpose of this document
This document shows web editors how to create expandable blocks of text
Step-by-Step Guide
Overview
An accordion is a stacked list of headings that expand or collapse to show or hide content. This helps organize long pages so users can quickly scan all section titles at once.
Before you Begin
This is an intermediate-level task for content editors. If you want to practice, work on an unpublished page until you're satisfied with the results.
For basic Drupal help, check our Drupal Support documentation. If you still need help, please submit a ticket.
Step 1: Create New Basic Page
Click Content
Click Add Content
Select Basic Page
Step 2: Fill in Page Information
Enter your Title and add your content in the Body field.
Step 3: Open 'Source' Mode
In the Body field:
Click Source.
This switches the editor into HTML mode.
Your page should now look like this:
Step 4: Remove Formatting
Delete all paragraph tags:
<p> and </p>(The accordion styling will apply automatically—no heading styles are needed.)
Your source code will now look like this:
Step 5: Add Details and Summary
For each accordion section:
Start with
<details>.Add a
<summary>tag for the clickable heading and close the title with</summary>.Add your section text underneath.
Close the text description with
</details>(The accordion styling will apply automatically—no heading styles are needed.)
Example (copy/paste):
<details>
<summary>This is the text that shows up that you can click to expand</summary>
This is the text that shows up when you click on the text above to expand
</details>Important:
Make sure all accordion sections are collapsed before saving. If any are open, they will always appear open for site visitors.
When finished, click Source again to return to the normal editor.
Step 6: Save and View Your File
Click Save
Here is your new accordion menu:
Users can click the plus sign on each section to expand it.