Accordion Component

A series of expanding/collapsing panels of content.

The accordion component is a versatile UI pattern that helps organize content into expandable and collapsible sections. By allowing users to reveal or hide information as needed, it reduces clutter on the page and makes complex layouts easier to navigate. Built with responsive design principles, the accordion adapts seamlessly across devices, ensuring a consistent and user-friendly experience on mobile, tablet, and desktop.

Accessibility is at the core of the accordion component. With semantic HTML, keyboard navigation, and screen reader support, it ensures that content remains usable by all audiences. Whether used for FAQs, navigation menus, or structured content organization, the accordion component provides a reliable, standards-aligned foundation available in Evo Web's CSS, React, and Marko implementations.

The accordion pattern is a composite pattern; each item in the accordion is a details disclosure widget.

Terminology

We use the following terminology when discussing this pattern.

• accordion : the pattern as a whole, comprised of the following sub-parts
• panel : each panel in the accordion is a details disclosure widget
• header : each panel displays an interactive summary of the panel contents
• heading : each header contains a nested heading level element
• auto-collapse : an accordion that automatically collapses other open panels when a new panel is opened

HTML

The semantic structure is a list of details widgets.

<ul class="accordion" aria-roledescription="accordion">
  <li>
    <details class="accordion__details" open>
      <summary>
        <h4>Buying</h4>
      </summary>
      <ul>
        <li>
          <a href="http://www.ebay.com"> Purchases </a>
        </li>
        <li>
          <a href="http://www.ebay.com"> Bids/Offers </a>
        </li>
        <li>
          <a href="http://www.ebay.com"> Didn't Win </a>
        </li>
      </ul>
    </details>
  </li>
  <li>
    <details class="accordion__details">
      <summary>
        <h4>Selling</h4>
      </summary>
      <ul>
        <li>
          <a href="http://www.ebay.com"> Sold </a>
        </li>
        <li>
          <a href="http://www.ebay.com"> Bids/Offers </a>
        </li>
        <li>
          <a href="http://www.ebay.com"> Didn't Swell </a>
        </li>
      </ul>
    </details>
  </li>
</ul>

CSS

In some browsers the implicit list role is removed when CSS list-style-type: none is applied, therefore our CSS uses the ::marker pseudo-element instead.

ul.accordion ::marker {
  font-size: 0;
}

JavaScript

For accordions that allow all panels to be open at once, no scripting is necessary; each nested details widget will handle the open and close mechanics.

For accordions limited to a single open panel, the name attribute allows multiple <details> elements to be linked, ensuring only one is open at a time. This approach effectively eliminates the need for JavaScript.

On older browsers that do not yet support the name attribute, the JavaScript steps can be briefly summarized as the following:

1. Find each nested details element
2. Listen to toggle event of each details element
3. When receiving a toggle event, if the details state has moved from closed to open, close all other details elements