bootstrap 4 collapse css design code example

Example: bootstrap collapse

<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>
   <button
      class="btn btn-primary"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target=".multi-collapse"
      aria-expanded="false"
      aria-controls="multiCollapseExample1 multiCollapseExample2"
   >
      Toggle both elements
   </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>