Design System

Accordion

Accordions collapse content that may not be relevant to all audiences.

open this example in its own window

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla nisi veniam doloribus corrupti ut dolores debitis, quos excepturi assumenda sit praesentium ab culpa soluta, et asperiores? Autem ea quo repellendus.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla nisi veniam doloribus corrupti ut dolores debitis, quos excepturi assumenda sit praesentium ab culpa soluta, et asperiores? Autem ea quo repellendus. 

<div class="accordion" id="accordion-component-minimal">
  <div class="accordion-item">
    <h2
      class="accordion-header"
      id="panel-heading--accordion-component-minimal--1"
    >
      <button
        class="accordion-button collapsed"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#panel-collapse--accordion-component-minimal--1"
        aria-expanded="true"
        aria-controls="panel-collapse--accordion-component-minimal--1"
      >
        More content
      </button>
    </h2>
    <div
      id="panel-collapse--accordion-component-minimal--1"
      class="accordion-collapse collapse"
      aria-labelledby="panel-heading--accordion-component-minimal--1"
    >
      <div class="accordion-body">
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla nisi
          veniam doloribus corrupti ut dolores debitis, quos excepturi assumenda
          sit praesentium ab culpa soluta, et asperiores? Autem ea quo
          repellendus.
        </p>
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2
      class="accordion-header"
      id="panel-heading--accordion-component-minimal--2"
    >
      <button
        class="accordion-button collapsed"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#panel-collapse--accordion-component-minimal--2"
        aria-expanded="true"
        aria-controls="panel-collapse--accordion-component-minimal--2"
      >
        Even more content
      </button>
    </h2>
    <div
      id="panel-collapse--accordion-component-minimal--2"
      class="accordion-collapse collapse"
      aria-labelledby="panel-heading--accordion-component-minimal--2"
    >
      <div class="accordion-body">
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla nisi
          veniam doloribus corrupti ut dolores debitis, quos excepturi assumenda
          sit praesentium ab culpa soluta, et asperiores? Autem ea quo
          repellendus.
        </p>
      </div>
    </div>
  </div>
</div>

Options to the accordion() macro

items: Array<Item>

An array of accordion items.

id: string

The ID of the component's root HTML element.

mutuallyExclusive: boolean = false

Whether only one item can be shown at a time.

Options to Item

header: string
body: string 
{% from 'macros/component/accordion.html' import accordion %}

{{ accordion({
    'id': 'accordion-component-minimal',
    'items': [
      {
        'header': 'More content',
        'body': '
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla nisi veniam doloribus corrupti
ut dolores debitis, quos excepturi assumenda sit praesentium ab culpa soluta, et asperiores?
Autem ea quo repellendus.
</p>
        ' | safe
      },
      {
        'header': 'Even more content',
        'body': '
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla nisi veniam doloribus corrupti
ut dolores debitis, quos excepturi assumenda sit praesentium ab culpa soluta, et asperiores?
Autem ea quo repellendus.
</p>
        ' | safe
      }
    ]
}) }}

Showing items by default

open this example in its own window

Lorem ipsum, dolor sit amet.

Lorem ipsum, dolor sit amet. 

<div class="accordion" id="accordion-component-show">
  <div class="accordion-item">
    <h2
      class="accordion-header"
      id="panel-heading--accordion-component-show--1"
    >
      <button
        class="accordion-button collapsed"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#panel-collapse--accordion-component-show--1"
        aria-expanded="true"
        aria-controls="panel-collapse--accordion-component-show--1"
      >
        More content
      </button>
    </h2>
    <div
      id="panel-collapse--accordion-component-show--1"
      class="accordion-collapse collapse"
      aria-labelledby="panel-heading--accordion-component-show--1"
    >
      <div class="accordion-body">
        <p>Lorem ipsum, dolor sit amet.</p>
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2
      class="accordion-header"
      id="panel-heading--accordion-component-show--2"
    >
      <button
        class="accordion-button"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#panel-collapse--accordion-component-show--2"
        aria-expanded="true"
        aria-controls="panel-collapse--accordion-component-show--2"
      >
        Even more content
      </button>
    </h2>
    <div
      id="panel-collapse--accordion-component-show--2"
      class="accordion-collapse collapse show"
      aria-labelledby="panel-heading--accordion-component-show--2"
    >
      <div class="accordion-body">
        <p>Lorem ipsum, dolor sit amet.</p>
      </div>
    </div>
  </div>
</div>

Options to the accordion() macro

items: Array<Item>

An array of accordion items.

id: string

The ID of the component's root HTML element.

mutuallyExclusive: boolean = false

Whether only one item can be shown at a time.

Options to Item

header: string
body: string 
{% from 'macros/component/accordion.html' import accordion %}

{{ accordion({
    'id': 'accordion-component-show',
    'items': [
      {
        'header': 'More content',
        'body': '
<p>
Lorem ipsum, dolor sit amet.
</p>
        ' | safe
      },
      {
        'header': 'Even more content',
        'body': '
<p>
Lorem ipsum, dolor sit amet.
</p>
        ' | safe,
        'show': true
      }
    ]
}) }}

Mutually exclusive items

open this example in its own window

Lorem ipsum, dolor sit amet.

Lorem ipsum, dolor sit amet. 

<div class="accordion" id="accordion-component-mutually-exclusive">
  <div class="accordion-item">
    <h2
      class="accordion-header"
      id="panel-heading--accordion-component-mutually-exclusive--1"
    >
      <button
        class="accordion-button"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#panel-collapse--accordion-component-mutually-exclusive--1"
        aria-expanded="true"
        aria-controls="panel-collapse--accordion-component-mutually-exclusive--1"
      >
        More content
      </button>
    </h2>
    <div
      id="panel-collapse--accordion-component-mutually-exclusive--1"
      class="accordion-collapse collapse show"
      aria-labelledby="panel-heading--accordion-component-mutually-exclusive--1"
      data-bs-parent="#accordion-component-mutually-exclusive"
    >
      <div class="accordion-body">
        <p>Lorem ipsum, dolor sit amet.</p>
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2
      class="accordion-header"
      id="panel-heading--accordion-component-mutually-exclusive--2"
    >
      <button
        class="accordion-button collapsed"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#panel-collapse--accordion-component-mutually-exclusive--2"
        aria-expanded="true"
        aria-controls="panel-collapse--accordion-component-mutually-exclusive--2"
      >
        Even more content
      </button>
    </h2>
    <div
      id="panel-collapse--accordion-component-mutually-exclusive--2"
      class="accordion-collapse collapse"
      aria-labelledby="panel-heading--accordion-component-mutually-exclusive--2"
      data-bs-parent="#accordion-component-mutually-exclusive"
    >
      <div class="accordion-body">
        <p>Lorem ipsum, dolor sit amet.</p>
      </div>
    </div>
  </div>
</div>

Options to the accordion() macro

items: Array<Item>

An array of accordion items.

id: string

The ID of the component's root HTML element.

mutuallyExclusive: boolean = false

Whether only one item can be shown at a time.

Options to Item

header: string
body: string 
{% from 'macros/component/accordion.html' import accordion %}

{{ accordion({
    'id': 'accordion-component-mutually-exclusive',
    'mutuallyExclusive': true,
    'items': [
      {
        'header': 'More content',
        'body': '
<p>
Lorem ipsum, dolor sit amet.
</p>
        ' | safe,
        'show': true
      },
      {
        'header': 'Even more content',
        'body': '
<p>
Lorem ipsum, dolor sit amet.
</p>
        ' | safe
      }
    ]
}) }}