Bootstrap5 Tabs to Collapse cards, inside cards can't collapse

Cristian Garate 0
Viewed 24

this code on mobile view works fine but on desktop view see the snippet here how the dogs tab content (another collapsible card ,click on Dog 1 red header) can't collapse

      <div class="card-body">
        <ul class="list-group">
          <li class="list-group-item text-bg-danger" aria-current="true" data-bs-toggle="collapse" role="button" data-bs-target="#dog1">Dog 1</li>
          <div id="dog1" class="collapse">
            <li class="list-group-item d-flex justify-content-between align-items-center">Eyes <span>2</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">Tail<span>short</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">Color <span>black</span>
            </li>
          </div>
        </ul>
        <br>
      </div>
target collapse toggle tabs bootstrap-5
1 Answers

All collapses in .responsive have display-block set

.responsive-tabs .card  .collapse {
    display: block;/*OK*/         
 }

Solution: only set first-child using >

.responsive-tabs .card > .collapse {
       display: block;         
}
Okan Karadag0
Related