Collapse • Natura11y
Jump to main contentJump to website footer

There is a newer version of Naturally.

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


        <button
            class="button width-100 theme-primary display-block"
            data-toggle="collapse"
            data-target-toggle="#target-id">
                Navigation
        </button>
        
        <div
            class="collapse border 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.