Skip Navigation

Photo by Nicole Geri  on Unsplash

Collapse

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 selctor. With each button press, the target's visibility toggles between show and hide.

<button
    class="button width-100 theme-primary display-block border-radius"
    data-toggle="collapse"
    data-target-toggle="#target-id">
        Navigation
</button>

<div
    class="collapse border border-radius margin-y-3"
    id="target-id">
        <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>
Figure 1
Line #Details
3-4

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

The data-target-toggle="#target-id" attribute equals the value of its target selector's id attribute.

9-10

The .collapse class is required.

It initially hides the target selector.

The id attribute equals the value of its associated button's data-target-toggle attribute.