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