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

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

toggle

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

Example

jQuery JavaScript

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

show

This method shows a collapsible element.

Example

jQuery JavaScript

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

hide

This method hides a collapsible element.

Example

jQuery JavaScript

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

dispose

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

Example

jQuery JavaScript

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

getInstance

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

Example

jQuery JavaScript

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

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

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myCollapse = bootstrap.Collapse.getOrCreateInstance($("#myCollapse")[0]);
        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

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