Accordion

An accordion is a list of headers that toggle the display of content.

Praesent ut efficitur dui, id lacinia metus. Suspendisse ultrices dictum eros ut euismod. Duis at ipsum rhoncus, gravida diam non, elementum purus. Ut eget pharetra leo. Suspendisse pellentesque imperdiet arcu bibendum fermentum. Nunc elit turpis, iaculis sed rhoncus at, aliquam nec ipsum. Duis fringilla ornare mattis.

Praesent ut efficitur dui, id lacinia metus. Suspendisse ultrices dictum eros ut euismod. Duis at ipsum rhoncus, gravida diam non, elementum purus. Ut eget pharetra leo. Suspendisse pellentesque imperdiet arcu bibendum fermentum. Nunc elit turpis, iaculis sed rhoncus at, aliquam nec ipsum. Duis fringilla ornare mattis.

<div class="fl-accordion accordion-flush">
        <div class="fl-accordion-item">
            <h2 class="fl-accordion__heading"><button type="button" class="fl-accordion__button collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#a1">Accordion Item #1</button></h2>
            <div id="a1" class="fl-accordion__content collapse">
                <div class="fl-prose">
                    <p>Praesent ut efficitur dui, id lacinia metus. Suspendisse ultrices dictum eros ut euismod. Duis at ipsum rhoncus, gravida diam non, elementum purus. Ut eget pharetra leo. Suspendisse pellentesque imperdiet arcu bibendum fermentum. Nunc elit turpis, iaculis sed rhoncus at, aliquam nec ipsum. Duis fringilla ornare mattis.</p>
                </div>
            </div>
        </div>
        <div class="fl-accordion-item">
            <h2 class="fl-accordion__heading"><button type="button" class="fl-accordion__button  collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#a2">Accordion Item #2</button></h2>
            <div id="a2" class="fl-accordion__content collapse">
                <div class="fl-prose">
                    <p>Praesent ut efficitur dui, id lacinia metus. Suspendisse ultrices dictum eros ut euismod. Duis at ipsum rhoncus, gravida diam non, elementum purus. Ut eget pharetra leo. Suspendisse pellentesque imperdiet arcu bibendum fermentum. Nunc elit turpis, iaculis sed rhoncus at, aliquam nec ipsum. Duis fringilla ornare mattis.</p>
                </div>
            </div>
        </div>
    </div>

Variations

Nested Items

A secondary accordion nested within a primary accordion item.

Leading Icon

An associated icon positioned to the left of an accordion’s header. Helps to bring visual emphasis to its respective content

Guidance

When to use the accordion component

  • If users will only need a few specific pieces of content within a page.
  • To give users the choice to show and hide sections that are relevant to them.
  • If you have only a small space to display a lot of content.

When not to use the accordion component

  • If users need to see most or all of the information on a page. Use well-formatted text instead.
  • If there’s not enough content to warrant condensing. Accordions increase cognitive load and interaction cost because users have to make decisions about what headers to click on.

Usability guidance

  • Make the entire header selectable. Allow users to click anywhere in the header area to expand or collapse the content; a larger target is easier to manipulate.
  • Give interactive elements enough space. Make sure interactive elements within the collapsible region are far enough from the headers that users don’t accidentally trigger a collapse. (The exact distance depends on the device.)

Accessibility

  • Code header areas in the accordion as buttons. Using a <button type=”button”> assures accordions are usable with both screen readers and keyboards.
  • Use aria-expanded on buttons to express an accordion’s default state. Buttons should state if they are expanded by default with aria-expanded=”true”. The aria-expanded=”false” attribute will be added to other buttons when the accordion is initialized by the JavaScript.

Changelog

Meaningful code and guidance updates are listed in the following table:

Date LBDS Version Affects Description
11/17/2022 1.1.1
  • Styling
  • WordPress

Praesent ut efficitur dui, id lacinia metus. Suspendisse ultrices dictum eros ut euismod. Duis at ipsum rhoncus, gravida diam non, elementum purus.
10/31/2022 1.1.0
  • JavaScript
  • Guidance

Praesent ut efficitur dui, id lacinia metus. Suspendisse ultrices dictum eros ut euismod. Duis at ipsum rhoncus, gravida diam non, elementum purus.

Content