How to catch and handle the show and hide events on the Bootstrap 5 accordion component.

An accordion is a show/hide card that collapses or expands when clicked, it is good for keeping content compact and preventing a lot of scrolling.

Bootstrap 5 uses its own standalone Javascript and no longer requires jQuery. It comes with Collapse events which is the toggle visibility of components.

Catching show or hide accordion events

Define the id of the collapse div, this is what gets shown or hidden depending on the click state. Then there are 2 event listeners that can be used:

let orangeAcc = document.getElementById("orange");

orangeAcc.addEventListener("show.bs.collapse", function () {
  alert("Shown orange");
});

orangeAcc.addEventListener("hide.bs.collapse", function () {
  alert("Hidden orange");
});

The first one is show.bs.collapse this is fired immediately when the show method is called.

hide.bs.collapse is when the hide method gets called.

You can also use shown or hidden instead of show/hide if you want to wait for the CSS transition to finish first.

CodePen link.

Full HTML code:

<div class="container">
  <div class="accordion">
    <div class="card mb-0">
      <div class="card-header">
        <h5 class="m-0">
          <a class="acc-title collapsed d-block pt-2 pb-2" data-bs-toggle="collapse" href="#apple" aria-expanded="true" aria-controls="collapseTwo">
            Apple
          </a>
        </h5>
      </div>
      <div id="apple" class="collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
        <div class="card-body">
          <p>This is the apple</p>
        </div>
      </div>
    </div>
    <div class="card mb-0">
      <div class="card-header">
        <h5 class="m-0">
          <a class="acc-title collapsed d-block pt-2 pb-2" data-bs-toggle="collapse" href="#lemon" aria-expanded="false" aria-controls="collapseTwo">
            Lemon
          </a>
        </h5>
      </div>
      <div id="lemon" class="collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
        <div class="card-body">
          <p>This is the lemon</p>
        </div>
      </div>
    </div>
    <div class="card mb-0">
      <div class="card-header">
        <h5 class="m-0">
          <a class="acc-title collapsed d-block pt-2 pb-2" data-bs-toggle="collapse" href="#orange" aria-expanded="false" aria-controls="collapseTwo">
            Orange
          </a>
        </h5>
      </div>
      <div id="orange" class="collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
        <div class="card-body">
          <p>This is the orange</p>
        </div>
      </div>
    </div>
  </div>
</div>

Full JS code:

let appleAcc = document.getElementById("apple");

appleAcc.addEventListener("show.bs.collapse", function () {
  alert("Shown apple");
});

appleAcc.addEventListener("hide.bs.collapse", function () {
  alert("Hidden apple");
});

let lemonAcc = document.getElementById("lemon");

lemonAcc.addEventListener("show.bs.collapse", function () {
  alert("Shown lemon");
});

lemonAcc.addEventListener("hide.bs.collapse", function () {
  alert("Hidden lemon");
});

let orangeAcc = document.getElementById("orange");

orangeAcc.addEventListener("show.bs.collapse", function () {
  alert("Shown orange");
});

orangeAcc.addEventListener("hide.bs.collapse", function () {
  alert("Hidden orange");
});