Collapsible accordion

Last updated
Save as PDF

Use an accordion to create content sections that can expand and collapse.

Collapsible accordions can help you organize information into easily digestible sections on a page. They are an alternative to using bulleted lists or sections with <div> wrappers. Consider using accordions for FAQs, glossaries, or pages where you want users to be able to access more information without using a contextual help window or opening a separate browser tab.

Examples

When you click on an accordion item, you will be able to see the content "hidden" underneath.

Code added to individual pages will only apply on that page. If you add the JavaScript and CSS to your header, the accordion will be accessible for all of your pages where you apply the custom class to text.

No, this is just an option. You can use whatever content organization method you prefer.

Add HTML

This creates an accordion button and placeholder text for it. You can add the HTML code snippet multiple times to create additional accordions.

Open your page in Edit mode.
View your page in Source view (select View > </>Source, or click the </>HTML button from the Editor toolbar).

Add the following HTML to your page:

<button class="accordion">Collapsible section</button>
<div class="panel">
  <p>foo bar baz</p>
</div>

Add the same HTML snippet for each additional accordion you want on the page (optional).

Add your content within the accordion

There are two ways to add content: in HTML view or in Visual view.

In HTML view:

In the HTML snippet you added earlier, replace "Collapsible section" with the text for the accordion item, and replace "foo bar baz" with the text you want to display when the accordion is expanded.

In Visual view:

Edit your text the same way you normally do.
If you need to return to regular text outside of the accordion, hover below your last typed line until you see the dotted red line and click to create a new paragraph outside of the accordion.

Add CSS to customize the accordion button

This styles the accordion button only, not the content within.
If you skip this step, the accordion will follow the global site styles or any custom CSS you have applied to the page already.
Note: Do not use the Editor to add any formatting changes on the button. Apply style changes like font-size, etc. with CSS instead (see below).

Add a CSS code block with the following code to your page:

/* Style the buttons that open and close the accordion panel */
.accordion {
  background-color: #eee;
  border: none;
  color: #444;
  display: flex;
  align-items: center;
}

/* Add a background color to the button if it is clicked, and when you move the mouse over it (hover) */
button.accordion.acc-active, .no-touch button.accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  display: none;
  padding: 0 2em;
}

.accordion:before {
  color: #777; /* Change the color of your plus or minus icons */
  content: '\e893'; /* Icomoon character for "plus" sign (+) */
  font-family: icomoon;
  font-size: 1.25em; /* Change the size of your icons */
  padding-right: .25em;
}

.accordion.acc-active:before {
  content: "\e892"; /* Icomoon character for "minus" sign (-) */
}

Replace the color values with the colors you want to use (optional).

Add JavaScript

This ensures that your accordion collapses and expands when you click it.

Adding JS to the end of the page ensures the elements the JavaScript affects on are read before the code is run.

Add a JavaScript code block with the following code to your page:

var acc = document.querySelectorAll(".accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
        this.classList.toggle("acc-active");

        /* Toggle between hiding and showing the active panel */
        var panel = this.parentElement.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    });
}

After you have added all three pieces of code (HTML, CSS, and JavaScript), click Save. Verify that your accordion collapses and expands when clicked.