Bootstrap 5 Collapse Methods

Bootstrap 5 Collapse Methods are used to control the visibility of a Bootstrap 5 Collapse element, manually.

Bootstrap 5 Collapse Methods:

toggle: It is used to toggle the visibility of a collapsible element.
show: It is used to show a collapsible element.
hide: It is used to hide a collapsible element.
dispose: It is used to dispose a collapsible element.
getInstance: It is a static method that is used to get the collapsible element associated with the DOM.
getOrCreateInstance: It is a static method that is used to get the collapsible element associated with the DOM or create a new one if it is not present.

Syntax:

collapse.collapse_method();

Below examples illustrate the Bootstrap 5 Collapse Methods:

Example 1: In this example, we will show and hide the collapsible element using the "show" and "hide" methods given by the Bootstrap 5 collapse object.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
          integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
          crossorigin="anonymous">
    </script>
</head>

<body class="m-2">
    <h1 class="text-success">GeeksforGeeks</h1>
    <strong>Bootstrap 5 Collapse Methods</strong>
    <br>
    <button type="button" id="showButton">
        Show Collapse Element
    </button>
    <button type="button" id="hideButton">
        Hide Collapse Element
    </button>
    <br><br>
    <div id="example1">
        <div class="card card-body">
            Some placeholder content for the first
            collapse component of this multi-collapse example.
            This panel is hidden by default but revealed when
            the user activates the relevant trigger.
        </div>
    </div>

    <script>
        // We will first get collapsible element by ID
        const myCollapse = document.getElementById('example1')
              
        // We will create collapse object         
        // so that we can access the methods 
        const bsCollapse = new bootstrap.Collapse(myCollapse)
              
        // We will get the buttons that call the collapse methods
        const showButton = document.getElementById('showButton')
        const hideButton = document.getElementById('hideButton')
        
        showButton.addEventListener('click', () => {
        // We will show the collapsible element 
                    bsCollapse.show()
        })
        
        hideButton.addEventListener('click', () => {
            // we will hide the collapsible element 
            bsCollapse.hide()
       })
    </script>
</body>
</html>

Output:

Example 2: In this example, we will toggle and dispose of the collapsible element using the "toggle" and "dispose" methods given by the Bootstrap 5 Collapse object. Once we dispose of a collapsible element, we cannot use any methods given by Bootstrap 5 to collapse object as it gets destroyed in the DOM.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
          integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
          crossorigin="anonymous">
    </script>
</head>

<body class="m-2">
    <h1 class="text-success">GeeksforGeeks</h1>
    <strong>Bootstrap 5 Collapse Methods</strong>
    <br>
    <button type="button" id="toggleButton">
        Toggle Collapse Element
    </button>
    <button type="button" id="disposeButton">
        Dispose Collapse Element
    </button>
    <br><br>
    <div id="example1">
        <div class="card card-body">
            Some placeholder content for the first collapse
            component of this multi-collapse example. 
            This panel is hidden by default but revealed 
            when the user activates the relevant trigger.
        </div>
    </div>

    <script>
        // We will first get collapsible element by ID
        const myCollapse = document.getElementById('example1')
      
        // We will create collapse object        
        // so that we can access the methods 
        const bsCollapse = new bootstrap.Collapse(myCollapse)
      
       // We will get the buttons that call the collapse methods
       const toggleButton = document.getElementById('toggleButton')
       const disposeButton = document.getElementById('disposeButton')

        toggleButton.addEventListener('click', () => {
            // we will toggle the collapsible element 
            bsCollapse.toggle()
        })

        disposeButton.addEventListener('click', () => {
            // we will dispose the collapsible element 
            bsCollapse.dispose()
        })
    </script>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/components/collapse/#methods

Bootstrap 5 Collapse Methods

Explore