Accordion events with BootStrap

<div class="accordion" id="eventsAccordion">
  [events_list tag="your_tag" scope="future" limit="10"]
  <div class="accordion-item">
    <h2 class="accordion-header" id="heading#_EVENTID">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse#_EVENTID" aria-expanded="true" aria-controls="collapse#_EVENTID">
        #_EVENTNAME - #_EVENTDATES at #_EVENTTIMES
      </button>
    </h2>
    <div id="collapse#_EVENTID" class="accordion-collapse collapse" aria-labelledby="heading#_EVENTID" data-bs-parent="#eventsAccordion">
      <div class="accordion-body">
        <h3>#_EVENTNAME</h3>
        <p>#_EVENTEXCERPT</p>
        <p>#_EVENTNOTES</p>
        #_BOOKINGFORM
      </div>
    </div>
  </div>
  [/events_list]
</div>