How to open offcanvas programmatically in Bootstrap 5?

Question

I have a bottom offcanvas in my webpage, i would open it on a card click, by trying to set the needed attributes or by using the code from the docs it's not working as the offcanvas shows only the backdrop and dismiss it immedialty.

Here is what i've tried:

const products = document.getElementsByClassName("card product");

var productClick = function (event) {
    event.preventDefault()
    var myOffcanvas = document.getElementById('offcanvasBottom')
    var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
    bsOffcanvas.show();
};

Array.from(products).forEach(function (element) {
  element.addEventListener("click", productClick);
});

user_10817595 · Answer

The problem is the card click event is propagating to inside elements. Instead use event.stopPropagation()...

const products = document.getElementsByClassName("product");
var myOffcanvas = document.getElementById('offcanvasBottom')
    
var productClick = function (event) {
    //event.preventDefault()
    event.stopPropagation()
    var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
    bsOffcanvas.show()
}

Array.from(products).forEach(function (element) {
    element.addEventListener("click", productClick);
})

How to open offcanvas programmatically in Bootstrap 5?

1 Answers