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);
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>


<div class="card product" style="width: 18rem">
  <div class="card-body text-center">
    <h2 class="card-title fw-bolder">TEST</h2>
    <p class="card-text fw-bolder">TEST</p>
  </div>
</div>

      <div
        class="offcanvas offcanvas-bottom"
        tabindex="-1"
        id="offcanvasBottom"
      >
        <div class="offcanvas-header">
          <button
            type="button"
            class="btn-close text-reset"
            data-bs-dismiss="offcanvas"
            aria-label="Close"
          ></button>
        </div>
        <div class="offcanvas-body">
         BODY
        </div>
      </div>

Answer 1

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);
})

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>


<div class="card product" style="width: 18rem">
  <div class="card-body text-center">
    <h2 class="card-title fw-bolder">TEST</h2>
    <p class="card-text fw-bolder">TEST</p>
  </div>
</div>

      <div
        class="offcanvas offcanvas-bottom"
        tabindex="-1"
        id="offcanvasBottom"
      >
        <div class="offcanvas-header">
          <button
            type="button"
            class="btn-close text-reset"
            data-bs-dismiss="offcanvas"
            aria-label="Close"
          ></button>
        </div>
        <div class="offcanvas-body">
         BODY
        </div>
      </div>

Answer 2

Add 'show' in the class of offcanvas

<div class="offcanvas offcanvase-bottom show"></div>

or use javascript to add class

<div class="offcanvas offcanvase-bottom show" id="off-id"></div>
<script>
    document.getElementById('off-id').classList.add('show')
</script>