Skip to contentSkip to footer
Brown and green plant in close-up photography

Photo: Nicole Geri

Collapse

Introduction

Toggle the visibility of a block-level selector from a button located anywhere in the DOM.

The Collapse Relationship

The collapse mechanism establishes a relationship between a button and its target selector. With each button press, the target’s visibility toggles between show and hide.

HTML
<button
  class="button width-100 theme-primary"
  data-toggle="collapse"
  aria-controls="target-id"
  aria-expanded="false"
  type="button"
>
  Navigation
</button>


<div class="collapse margin-y-3" id="target-id">
  <div class="border padding-3">
    <nav aria-label="Example navigation">
      <ul class="nav nav--divider">
        <li>
          <a href="#1">Link</a>
        </li>
        <li>
          <a href="#1">Link</a>
        </li>
        <li>
          <a href="#1">Link</a>
        </li>
      </ul>
    </nav>
  </div>
</div>
Figure 1
Figure 1 notes
LinesDetails
3-6

On a <button> tag, the data-toggle="collapse" attribute is required.

The aria-controls attribute equals the value of its target selector’s id attribute.

The aria-expanded="false" attribute communicates the initial collapsed state.

11-27

The .collapse class is required. It initially hides the target selector, and its id attribute must match the trigger button’s aria-controls value. Place padding and borders on a child inside .collapse so the height animation stays predictable.

Close Target

To close a selector while opening another, add the data-target-close attribute to a button. The value should equal the target selector’s id attribute.

In Figure 2, each button’s data-target-close value matches the other button’s target panel id, so opening one panel closes the neighboring panel.

Target 1

Target 2

HTML
<div class="grid grid--column-2 gap-3">
  <button
    class="button width-100 theme-primary"
    data-toggle="collapse"
    aria-controls="target-id-1"
    aria-expanded="false"
    data-target-close="target-id-2"
    type="button"
  >
    Button 1
  </button>


  <button
    class="button width-100 theme-primary"
    data-toggle="collapse"
    aria-controls="target-id-2"
    aria-expanded="false"
    data-target-close="target-id-1"
    type="button"
  >
    Button 2
  </button>
</div>


<div class="collapse margin-y-3" id="target-id-1">
  <div class="border padding-4">
    <p>Target 1</p>
  </div>
</div>


<div class="collapse margin-y-3" id="target-id-2">
  <div class="border padding-4">
    <p>Target 2</p>
  </div>
</div>
Figure 2

Button

Navigation