Collapse via JS
Control collapse programmatically using the Bootstrap Collapse class for show, hide, toggle, and event listening.
Bootstrap
Intermediate
4 min read
Collapse JavaScript API
Example
const collapseEl = document.getElementById("myCollapse");
const bsCollapse = new bootstrap.Collapse(collapseEl, { toggle: false });
// Control
bsCollapse.show();
bsCollapse.hide();
bsCollapse.toggle();
// Events
collapseEl.addEventListener("show.bs.collapse", e => console.log("opening"));
collapseEl.addEventListener("shown.bs.collapse", e => console.log("opened"));
collapseEl.addEventListener("hide.bs.collapse", e => console.log("closing"));
collapseEl.addEventListener("hidden.bs.collapse",e => console.log("closed")); Pro Tip
show.bs.collapse fires before animation; shown.bs.collapse fires after — use shown to measure height.