Bootstrap Collapse

In this tutorial you will learn how to show and hide elements with Bootstrap.

Toggle Display of Content with Bootstrap

You can use the Bootstrap collapse JavaScript plugin to easily show and hide (or expand and collapse) specific elements on a web page. Buttons and anchors (i.e. the <button> and <a> elements) are typically used as triggers that are mapped to the elements you want to toggle.

Expand and Collapse Elements via Data Attributes

You can show and hide elements in Bootstrap by clicking on a button or link via data attributes without writing any JavaScript code. Let's try out an example and see how it actually works:

Example

Try this code »

<!-- Trigger Buttons HTML -->
<a href="#myCollapse" data-bs-toggle="collapse">Toggle Element</a>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#myCollapse">Toggle Element</button>

<!-- Collapsible Element HTML -->
<div class="collapse show" id="myCollapse">
    <div class="card card-body">This is a simple example of showing and hiding specific element via data attributes. Click any trigger buttons to toggle this panel.</div>
</div>

We've just created a collapsible control without writing any JavaScript code. Well, let's go through each part of this code one by one for a better understanding.

Explanation of Code

The Bootstrap collapse plugin basically requires the two elements to work properly — the trigger element such as a button or hyperlink, and the collapsible element itself.

The data-bs-toggle="collapse" attribute is added to the trigger or controller element along with a attribute data-bs-target (for buttons) or href (for anchors) to automatically assign control of one or more collapsible elements.
The data-bs-target or href attribute accepts a CSS selector (such as id selector #myCollapse in our example) to apply the collapse to a specific element.
The class .collapse is added to the collapsible element (line no-6).
You can optionally add the class .show (line no-6) to the collapsible element in addition to the class .collapse to make it open by default.

To make the collapsible controls to work in group like accordion menu, you can utilize the Bootstrap card component. See the tutorial on Bootstrap accordion to learn more about it.

Expand and Collapse Elements via JavaScript

You may also expand and collapse elements manually via JavaScript — just call the collapse() Bootstrap method with the id or class selector of the collapsible element.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCollapse").collapse("toggle");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCollapse");

    // Create a collapse instance, toggles the collapse element on invocation
    var myCollapse = new bootstrap.Collapse(element);

    btn.addEventListener("click", function(){
        myCollapse.toggle();
    });
});
</script>

Options

There are certain options which may be passed to the collapse() Bootstrap method to customize the functionality of a collapsible element.

Name	Type	Default Value	Description
parent	selector	false	All other collapsible elements under the specified parent will be closed while this collapsible item is shown on invocation.
toggle	boolean	true	Toggles the collapsible element on invocation.

You can also set these options using the data attributes on accordion — just append the option name to data-bs-, like data-bs-parent="#myAccordion", data-bs-toggle="false".

Methods

These are the standard bootstrap's collapse methods:

Passing options

You can additionally pass options to the collapse using options object.

In following example the display of the collapsible element will not toggle on invocation, because the toggle option for the collapsible element is set to false.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCollapse").collapse("toggle", {
            toggle: false
        });
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCollapse");

    /* Create a collapse instance, but do not toggle
    the collapse element on invocation */
    var myCollapse = new bootstrap.Collapse(element, {
        toggle: false
    });

    btn.addEventListener("click", function(){
        myCollapse.toggle();
    });
});
</script>

toggle

This method toggles (show or hide) a collapsible element.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCollapse").collapse("toggle");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCollapse");

    // Create a collapse instance, toggles the collapse element on invocation
    var myCollapse = new bootstrap.Collapse(element);
    
    btn.addEventListener("click", function(){
        myCollapse.toggle();
    });
});
</script>

show

This method shows a collapsible element.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCollapse").collapse("show");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCollapse");
    
    // Create a collapse instance, toggles the collapse element on invocation
    var myCollapse = new bootstrap.Collapse(element);
    
    btn.addEventListener("click", function(){
        myCollapse.show();
    });
});
</script>

hide

This method hides a collapsible element.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCollapse").collapse("hide");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCollapse");
    
    // Create a collapse instance, toggles the collapse element on invocation
    var myCollapse = new bootstrap.Collapse(element);
    
    btn.addEventListener("click", function(){
        myCollapse.hide();
    });
});
</script>

dispose

This method destroys an element's collapse (i.e. removes stored data on the DOM element).

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        var myCollapse = bootstrap.Collapse.getInstance($("#myCollapse")[0]);
        console.log(myCollapse);
        // {_element: div#myCollapse.collapse.show, _isTransitioning: false, _config: {…}, _triggerArray: Array(2), _selector: "#myCollapse", …}

        $("#myCollapse").collapse("dispose");
        console.log(myCollapse);
        // {_element: null, _isTransitioning: null, _config: null, _triggerArray: null, _selector: null, …}
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCollapse");

    btn.addEventListener("click", function(){
        var myCollapse = bootstrap.Collapse.getInstance(element);
        console.log(myCollapse);
        // {_element: div#myCollapse.collapse.show, _isTransitioning: false, _config: {…}, _triggerArray: Array(2), _selector: "#myCollapse", …}

        myCollapse.dispose();
        console.log(myCollapse);
        // {_element: null, _isTransitioning: null, _config: null, _triggerArray: null, _selector: null, …}
    });
});
</script>

getInstance

This is a static method which allows you to get the collapse instance associated with a DOM element.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myCollapse = bootstrap.Collapse.getInstance($("#myCollapse")[0]);
        console.log(myCollapse);
        // {_element: div#myCollapse.collapse.show, _isTransitioning: false, _config: {…}, _triggerArray: Array(2), _selector: "#myCollapse", …}
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCollapse");

    btn.addEventListener("click", function(){        
        var myCollapse = bootstrap.Collapse.getInstance(element);
        console.log(myCollapse);
        // {_element: div#myCollapse.collapse.show, _isTransitioning: false, _config: {…}, _triggerArray: Array(2), _selector: "#myCollapse", …}
    });
});
</script>

getOrCreateInstance

This is a static method which allows you to get the collapse instance associated with a DOM element, or create a new one in case if the collapse wasn't initialized.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myCollapse = bootstrap.Collapse.getOrCreateInstance($("#myCollapse")[0]);
        console.log(myCollapse);
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCollapse");

    btn.addEventListener("click", function(){     
        var myCollapse = bootstrap.Collapse.getOrCreateInstance(element);
        console.log(myCollapse);
    });
});
</script>

Tip: Static methods cannot be called on instances of the class (i.e. objects). They're called on the class itself. The keyword static is used to define a static method for a class.

Events

Bootstrap's collapse class includes few events for hooking into collapse functionality.

Event	Description
show.bs.collapse	This event fires immediately when the show instance method is called.
shown.bs.collapse	This event is fired when a collapse element has been made visible to the user. It will wait until the CSS transition process has been fully completed before getting fired.
hide.bs.collapse	This event is fired immediately when the hide method has been called.
hidden.bs.collapse	This event is fired when a collapse element has been hidden from the user. It will wait until the CSS transition process has been fully completed before getting fired.

The following example displays an alert message to the user when sliding transition of a collapsible element has been fully completed.

Example

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myCollapse").on("hidden.bs.collapse", function(){
        alert("Collapsible element has been completely closed.");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var myCollapse = document.getElementById("myCollapse");

    myCollapse.addEventListener("hidden.bs.collapse", function(){
        alert("Collapsible element has been completely closed.");
    });
});
</script>

Previous Page Next Page

Bootstrap Collapse

Toggle Display of Content with Bootstrap

Expand and Collapse Elements via Data Attributes

Example

Explanation of Code

Expand and Collapse Elements via JavaScript

Example

Options

Methods

Passing options

Example

toggle

Example

show

Example

hide

Example

dispose

Example

getInstance

Example

getOrCreateInstance

Example

Events

Example

About Us

Contact

Interactive Tools