Bootstrap Collapse

In bootstrap, the collapse feature is useful to show or hide the content elements by clicking on buttons or hyperlinks. The buttons or hyperlinks will trigger the specific elements that are mapped to toggle.

 

To implement the collapsible functionality, first create a collapsible element (<div>) with .collapse class. After that, create a hyperlink (<a>) or button (<button>) element with data-toggle="collapse" attribute and add data-target="#id" attribute to button or add href= "#id" attribute to the hyperlink to show or hide (toggle) the collapsible element content.

 

Live Preview

 

<a class="btn btn-primary" data-toggle="collapse" href="#collasediv">Collapsible Link</a>

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collasediv">

    Collapsible Button

</button>

<div class="collapse" id="collapsediv">

    <div class="card card-body">

        Tutlane is an eLearning organization providing quality online tutorials, articles, and information related to the latest information technology and non-technical subjects.

    </div>

</div>

If you observe the above code, we added data-target="#collapsediv" attribute to button and href= "#collapsediv" attribute to hyperlink to toggle (show / hide) the div content on both hyperlink and button click.

 

The above example will return the result like as shown below.

 

Bootstrap collapse example result

 

By default, the collapsible element content will be hidden. In case, if you want to show content then you need to add .show class to respective element like as shown below.

 

<div id="collapsediv" class="collapse show">

    <div class="card card-body">

        content

    </div>

</div>

Bootstrap Multiple Collapsible Targets

In bootstrap, we can toggle (show / hide) the multiple elements with single button click by adding the common class (for example: .multi-collapse) to the respective content elements and referring the same class in data-target attribute of the button like data-target = ".multi-collapse".

 

Live Preview

 

<a class="btn btn-primary" data-toggle="collapse" href="#collasediv">Toggle First</a>

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapsediv1">

    Toggle Second

</button>

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse">

    Toggle Both Elements

</button>

<div class="row">

    <div class="col">

        <div class="collapse multi-collapse" id="Div1">

            <div class="card card-body">

                Tutlane is an eLearning organization providing quality online tutorials, articles, and information related to the latest information technology and non-technical subjects.

            </div>

        </div>

    </div>

    <div class="col">

        <div class="collapse multi-collapse" id="Div2">

            <div class="card card-body">

                Tutlane is an eLearning organization providing quality online tutorials, articles, and information related to the latest information technology and non-technical subjects.

            </div>

        </div>

    </div>

</div>

The above example will return the result like as shown below.

 

Bootstrap multiple collapsible targets example result

Bootstrap Collapsible Accordion Menu

By using bootstrap card component, we can create the accordion by extending the default collapse behavior. To achieve proper accordion style, we need to wrap all the card items inside of <div> element with .accordion class. 

 

Live Preview

<div class="accordion" id="accordionExample">

    <div class="card">

        <div class="card-header" id="headingOne">

            <h2 class="mb-0">

        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne">

          Collapse Item #1

        </button>

      </h2>

        </div>

        <div id="collapseOne" class="collapse show" data-parent="#accordionExample">

            <div class="card-body">

                Tutlane is an eLearning organization providing quality online tutorials, articles, and information related to the latest technologies.

            </div>

        </div>

    </div>

    <div class="card">

        <div class="card-header" id="headingTwo">

            <h2 class="mb-0">

        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo">

          Collapse Item #2

        </button>

      </h2>

        </div>

        <div id="collapseTwo" class="collapse" data-parent="#accordionExample">

            <div class="card-body">

                Tutlane is an eLearning organization providing quality online tutorials, articles, and information related to the latest technologies.

            </div>

        </div>

    </div>

    <div class="card">

        <div class="card-header" id="headingThree">

            <h2 class="mb-0">

        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree">

          Collapse Item #3

        </button>

      </h2>

        </div>

        <div id="collapseThree" class="collapse" data-parent="#accordionExample">

            <div class="card-body">

                Tutlane is an eLearning organization providing quality online tutorials, articles, and information related to the latest technologies.

            </div>

        </div>

    </div>

</div>

If you observe the above code, we added data-parent attribute to the collapsible elements to make sure that only one item to be opened at a time and remaining all elements to be closed.

 

The above example will return the result like as shown below.

 

Bootstrap collapsible accordion menu example result

 

This is how the collapse feature is useful to show or hide the content elements by clicking on buttons or hyperlinks based on our requirements.

Topics Covered