Bootstrap 5 Collapse Via JavaScript

Bootstrap 5 Collapse can be triggered using two ways using data attributes and using JavaScript. For using it with JavaScript, a new Bootstrap collapse object needs to be created. The show() and hide() predefined methods to attain basic handling of the collapse element via JavaScript. 

Prerequisite:Bootstrap 5 Collapse Usage, Bootstrap 5 Collapse Methods.

Bootstrap 5 Collapse Via JavaScript Used classes and methods: To implement collapse using JavaScript an understanding of the different classes and methods in the Bootstrap 5 Collapse Usage and Bootstrap 5 Collapse Methods is required. 

Syntax:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
 return new bootstrap.Collapse(collapseEl)
})

Example 1: The code example below demonstrates how we can use the collapse function via JavaScript and use  the toggle() method to handle the collapse:

Output:

Example 2: The code example below demonstrates how we can use the hide() and show() methods to use the collapse via JavaScript:

Output:

Reference:https://getbootstrap.com/docs/5.0/components/collapse/#via-javascript