<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>
.acc-title {
  text-decoration: none;
}
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");
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js