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= rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src= 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= rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src= 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
Please Login to comment...