How do you show only one collapsible element at a time?-CodePudding

Its all in the title. Basically, I'm working with the first example from this Bootstrap page. There is no example on this page that shows how to collapse other elements when you click and expand a different element. I basically want this to work similarly to an accordion, when you click on another element, the one you had open is hidden (closing it), and the one you clicked on expands. Please help me with this I'm really trying to figure this out, but I'm struggling. Here's some demo code from Bootstrap 5. How would I get this so these are two unique elements with unique content, and when you click on one, it expands, and the other one that's open closes. Thank you so much for your help - Demo Code Below - the link to this example is attached above. These both buttons have unique content, but they can both be opened at the same time - I don't want this, I want only so one opens at a time, and the other closes on click. Thanks - Any solution is appreciated

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Wrap your collapse in one div with id. And use data-target attribute with parent id.

<div id="abc">
  <p>
    <a
      class="btn btn-primary"
      data-bs-toggle="collapse"
      href="#multiCollapseExample1"
      role="button"
      aria-expanded="false"
      aria-controls="multiCollapseExample1"
      >Toggle first element</a
    >
    <button
      class="btn btn-primary"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#multiCollapseExample2"
      aria-expanded="false"
      aria-controls="multiCollapseExample2"
    >
      Toggle second element
    </button>
  </p>
  <div class="row">
    <div class="col">
      <div
        class="collapse multi-collapse"
        id="multiCollapseExample1"
        data-bs-parent="#abc"
      >
        <div class="card card-body">
          Some placeholder content for the first collapse component of this
          multi-collapse example. This panel is hidden by default but
          revealed when the user activates the relevant trigger.
        </div>
      </div>
    </div>
    <div class="col">
      <div
        class="collapse multi-collapse"
        id="multiCollapseExample2"
        data-bs-parent="#abc"
      >
        <div class="card card-body">
          Some placeholder content for the second collapse component of this
          multi-collapse example. This panel is hidden by default but
          revealed when the user activates the relevant trigger.
        </div>
      </div>
    </div>
  </div>
</div>