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

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. You can add formatting just like you would with any other content.

Add CSS

This styles the accordion. If you skip this step, the accordion will follow any custom CSS you have applied to the page already.

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;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

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

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

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.getElementsByClassName("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("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.

Add icons to the accordion (optional)

These icons will indicate if the item is expanded or collapsed.

Add the following CSS code to your page:

.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: left;
  margin-left: 0px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

Change the font size, color, and margin to fit your preferences or your site's style.