How can I do something as soon as a collapse item is closed?

Question

In the Bootstrap 5 documentation it says: You can create a collapse instance with the constructor, for example:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})

I need to close it on the click of a certain element and so I did so

document.body.addEventListener("click", el => {
  if (el.target.matches("#send-search")) {
    el.preventDefault();

    // Closing element
    new bootstrap.Collapse(document.querySelector("#find-el"), {
      hide: true,
    });

    // Do stuff do stuff when it is completely closed

  }
});

the element closes...

what I need is to perform a certain operation but only when the element is completely closed

Answer 1

You can attach a listener for the hidden.bs.collapse event...

myCollapse.addEventListener('hidden.bs.collapse', function () {
    console.log('closed!')
})

Demo: https://codeply.com/p/uSKVzr7uYT