Collapse • Natura11y
Jump to main contentJump to website footer
Brown and green plant in close up photography

Photo by 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.


        <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>
Figure 1
Line #Details
3-5

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

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

The aria-expanded="false" attribute is reccomended for accessibility.

11-13

The .collapse class is required. It initially hides the target selector.

The id attribute equals the value of its associated button's aria-controls attribute.

The aria-hidden="true" attribute is reccomended for accessibility.

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>
Figure 2