Internet Archive Design System

Accordion 

<div class="accordion" data-accordion>
    <details>
        <summary>
            <h2>One</h2>
        </summary>

        <p>Lorem ipsum</p>
    </details>

    <details>
        <summary>
            <h2>Two</h2>
        </summary>

        <p>Lorem ipsum</p>
    </details>

    <details>
        <summary>
            <h2>Three</h2>
        </summary>

        <p>Lorem ipsum</p>
    </details>
</div>
 
<div class="accordion" data-accordion>
  <details>
    <summary>
      <h2>One</h2>
    </summary>

    <p>Lorem ipsum</p>
  </details>

  <details>
    <summary>
      <h2>Two</h2>
    </summary>

    <p>Lorem ipsum</p>
  </details>

  <details>
    <summary>
      <h2>Three</h2>
    </summary>

    <p>Lorem ipsum</p>
  </details>
</div>
 
/* No context defined for this component. */

Multiple mutually exclusive expandable sections.

Do

  • Use accordions when there are many equivalent options available to the user but they only want to to interact with one.
  • Set one of the sections to be open by default if you know the user is most likely to want that one.

Don’t

  • Hide sections when there are very few of them or they’re very small and can be comfortably displayed at once.

Caution

  • You cannot show/hide sections based on screen size, only based on a user opening/closing the section themselves.