Introduction
Toggle the visibility of a block-level selector from a button located anywhere in the DOM.
The trigger button uses aria-expanded to communicate the open and closed state to assistive technology.
Pressing Escape while focus is inside the collapsed panel closes it and returns focus to the trigger button.
Respects prefers-reduced-motion — height and transition animations are disabled when this preference is active.
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.
<button
class="button width-100 theme-primary"
data-toggle="collapse"
aria-controls="target-id"
aria-expanded="false"
>
Navigation
</button>
<div
class="collapse border margin-y-3"
id="target-id"
aria-hidden="true"
>
<ul class="nav nav--divider" id="" role="navigation">
<li>
<a href="#1">Link</a>
</li>
<li>
<a href="#1">Link</a>
</li>
<li>
<a href="#1">Link</a>
</li>
</ul>
</div>
| Line # | Details |
|---|---|
| 3-5 | On a The The |
| 11-13 | The The The |
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.
<button
class="button width-100 theme-primary"
data-toggle="collapse"
aria-controls="#target-id-1"
aria-expanded="false"
data-target-close="#target-id-2"
>
Navigation
</button>
<div
class="collapse border margin-y-3"
id="target-id-1"
aria-hidden="true"
>
<ul class="nav nav--divider" role="navigation">
<li>
<a href="#1">Link</a>
</li>
<li>
<a href="#1">Link</a>
</li>
<li>
<a href="#1">Link</a>
</li>
</ul>
</div>
<div
class="collapse border margin-y-3"
id="target-id-2"
aria-hidden="true"
>
<ul class="nav nav--divider" role="navigation">
<li>
<a href="#1">Link</a>
</li>
<li>
<a href="#1">Link</a>
</li>
<li>
<a href="#1">Link</a>
</li>
</ul>
</div>
