Accordions

Accordions can be used to show headings but hide content by default until a heading is clicked on.

Use accordions when you have a lot of short groups of content and most users will only want to see a subset of it. Avoid accordions if most users will want to see all of the information, and/or if the content is lengthy. 

Our accordion implementation uses native HTML details disclosure elements. An optional button to expand all accordion items can be included.

Basic Accordion Structure
<details class="native-accordion__panel" id="[accordionItemId]">
  <summary class="native-accordion__header">
    [Accordion Item Title]
  </summary>
  <div class="native-accordion__content">
     [Accordion Item Content]
  </div>
</details>

Example

Sample Heading One

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sample Heading Two

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sample Heading Three

Aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Code

Example Accordion HTML
<div class="native-accordion" id="accordion-749639">
    <button type="button" class="js-accordion__expand-all" id="toggleAllBtn-749639" aria-controls="accordion-749639-detail-1 accordion-749639-detail-2 accordion-749639-detail-3" aria-expanded="false" aria-label="Expand all details" onclick="toggleAllDetails('accordion-749639', this)">
        Expand all
    </button>
    <details class="native-accordion__panel" id="accordion-749639-detail-1">
        <summary class="native-accordion__header">
            Sample Heading One
        </summary>
        <div class="native-accordion__content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </details>
    <details class="native-accordion__panel" id="accordion-749639-detail-2">
        <summary class="native-accordion__header">
            Sample Heading Two
        </summary>
        <div class="native-accordion__content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </details>
    <details class="native-accordion__panel" id="accordion-749639-detail-3">
        <summary class="native-accordion__header">
            Sample Heading Three
        </summary>
        <div class="native-accordion__content">
            <p>Aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
    </details>
</div>
Example Accordion JS
function toggleAllDetails(accordionId, btn) {
    const container = document.getElementById(accordionId);
    if (!container) return;
    const details = container.querySelectorAll('details');
    const someOpen = Array.from(details).some(detail => detail.open);
    const allOpen = Array.from(details).every(detail => detail.open);
    if (allOpen) {
        // Collapse all
        details.forEach(detail => { detail.open = false; });
        btn.textContent = "Expand all";
        btn.setAttribute('aria-expanded', 'false');
    }
    else if (someOpen && btn.textContent === "Collapse all") {
        // Collapse all
        details.forEach(detail => { detail.open = false; });
        btn.textContent = "Expand all";
        btn.setAttribute('aria-expanded', 'false');
    }
    else if (someOpen && btn.textContent === "Expand all") {
        // Expand all
        details.forEach(detail => { detail.open = true; });
        btn.textContent = "Collapse all";
        btn.setAttribute('aria-expanded', 'false');
    }
    else {
        // Expand all
        details.forEach(detail => { detail.open = true; });
        btn.setAttribute('aria-expanded', 'true');
        btn.textContent = "Collapse all";
    }
}

Includes

CommonSpot Registered Resource
// Load accordion registered resources
server.commonSpot.udf.resources.loadResources("accordion");

Help Us Improve This Page

Did you notice an error? Is there information that you expected to find on this page, but didn't? Let us know below, and we'll work on it.

Was this page helpful?



Comments are helpful!
500 character limit

Feedback is anonymous.