I'm currently having some trouble with creating a collapsible element in bootstrap 5. What I want is other sections to close when a different collapsible element is clicked (similar to an accordion). I want it so that only one section can be opened at a time.

Bootstraps collapse element is neat; however, I cannot find an example on their documentation site where other content collapses when one is expanded. I did some research, and a lot of people have been saying to use the data-parent element, but unfortunately, I'm having no luck with it.

Lets say I want to be able to make this happen with one of Bootstraps examples:

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

How would I go about this to ensure that an opened section closes when a different collapse element on the page is hit? This code example is the first one on this page: https://getbootstrap.com/docs/5.0/components/collapse/

Thank you very much for your help.