NETSCC Design System

Accordion

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

When to use this component

  • To allow users to show and hide sections of content relevant to their needs
  • To give an overview of multiple, related pieces of content
  • To allow relevant information to be easily compared

When not to use this component

  • For content that all users need to see
  • To make a page appear shorter
  • Within another accordion
  • With very large amounts of content inside the accordion

Variations

open this example in its own window

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fusce gravida odio enim, eget congue neque dignissim nec.

Donec lacinia faucibus sapien, in varius metus iaculis eget. Sed pellentesque libero in imperdiet elementum. 

<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"
      >
        Lorem ipsum
      </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. Fusce
          gravida odio enim, eget congue neque dignissim nec.
        </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"
      >
        Donec lacinia
      </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>
          Donec lacinia faucibus sapien, in varius metus iaculis eget. Sed
          pellentesque libero in imperdiet elementum.
        </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.

headingLevel: int = 2

The <hX> heading to use, where the value is one of 2, 3, 4, 5, or 6.

Options to Item

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

{{ accordion({
    'id': 'accordion-component-minimal',
    'items': [
      {
        'header': 'Lorem ipsum',
        'body': '
<p>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fusce gravida odio enim, eget congue neque dignissim nec.
</p>
        ' | safe
      },
      {
        'header': 'Donec lacinia',
        'body': '
<p>
  Donec lacinia faucibus sapien, in varius metus iaculis eget. Sed pellentesque libero in imperdiet elementum.
</p>
        ' | safe
      }
    ]
}) }}

Showing items by default

open this example in its own window

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fusce gravida odio enim, eget congue neque dignissim nec.

Donec lacinia faucibus sapien, in varius metus iaculis eget. Sed pellentesque libero in imperdiet elementum. 

<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"
      >
        Lorem ipsum
      </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 consectetur adipisicing elit. Fusce
          gravida odio enim, eget congue neque dignissim nec.
        </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"
      >
        Donec lacinia
      </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>
          Donec lacinia faucibus sapien, in varius metus iaculis eget. Sed
          pellentesque libero in imperdiet elementum.
        </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.

headingLevel: int = 2

The <hX> heading to use, where the value is one of 2, 3, 4, 5, or 6.

Options to Item

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

{{ accordion({
    'id': 'accordion-component-show',
    'items': [
      {
        'header': 'Lorem ipsum',
        'body': '
<p>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fusce gravida odio enim, eget congue neque dignissim nec.
</p>
        ' | safe
      },
      {
        'header': 'Donec lacinia',
        'body': '
<p>
  Donec lacinia faucibus sapien, in varius metus iaculis eget. Sed pellentesque libero in imperdiet elementum.
</p>
        ' | safe,
        'show': true
      }
    ]
}) }}

Mutually exclusive items

open this example in its own window

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fusce gravida odio enim, eget congue neque dignissim nec.

Donec lacinia faucibus sapien, in varius metus iaculis eget. Sed pellentesque libero in imperdiet elementum. 

<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"
      >
        Lorem ipsum
      </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 consectetur adipisicing elit. Fusce
          gravida odio enim, eget congue neque dignissim nec.
        </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"
      >
        Donec lacinia
      </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>
          Donec lacinia faucibus sapien, in varius metus iaculis eget. Sed
          pellentesque libero in imperdiet elementum.
        </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.

headingLevel: int = 2

The <hX> heading to use, where the value is one of 2, 3, 4, 5, or 6.

Options to Item

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

{{ accordion({
    'id': 'accordion-component-mutually-exclusive',
    'mutuallyExclusive': true,
    'items': [
      {
        'header': 'Lorem ipsum',
        'body': '
<p>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fusce gravida odio enim, eget congue neque dignissim nec.
</p>
        ' | safe,
        'show': true
      },
      {
        'header': 'Donec lacinia',
        'body': '
<p>
  Donec lacinia faucibus sapien, in varius metus iaculis eget. Sed pellentesque libero in imperdiet elementum.
</p>
        ' | safe
      }
    ]
}) }}