Good evening
For BOOTSTRAP regulars,
By clicking on the link (medico-surgical consumable), there is a collapse of information (as in the photo),
But all the cards on the same “row” take place at the same time
(knowing that by removing ROW, there is no longer this problem, but I need it for position management)
How to make so that only the card concerned which will unfold while keeping the row function?
code :
me
Thanks in advance
<div class="row justify-content-center" style="border: none;">
<div class="card dropdown dropdown-processed col-xl-3 col-md-6 mb-4 border-left-primary shadow h-150 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1"> Catégorie </div>
<a class="collapsed h6 mb-0 font-weight-bold text-gray-600" data-bs-toggle="collapse" data-bs-target="#cons" aria-expanded="true" aria-controls="cons"> Consommable <br> médico-chirurgical </a>
</div>
</div>
<div id="cons" class="collapse" aria-labelledby="headingTwo">
<ul class="ss_catg" style="list-style: none;">
@foreach ( $cons as $con)
<a class="collapse-item text-wrap" href="#"> {{$con->nom_ss_catg}} </a>
@endforeach
</ul>
</div>
</div>
</div>
<div class="card dropdown dropdown-processed col-xl-3 col-md-6 mb-4 border-left-success shadow h-150 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1"> Catégorie </div>
<a class="h6 mb-0 font-weight-bold text-gray-600 " data-bs-toggle="collapse" data-bs-target="#cons" aria-expanded="true" aria-controls="equip" href="Equipements"> Equipements </a>
</div>
</div>
<div id="equip" class="collapse" aria-labelledby="headingTwo">
<ul class="ss_catg" style="list-style: none;">
@foreach ( $equips as $equip)
<li><a href={{route('produits', [$equip->id,'0'])}}> {{$equip->nom_ss_catg}} </a></li>
@endforeach
</ul>
</div>
</div>
</div>
<div class="card col-xl-3 col-md-6 mb-4 border-left-danger shadow h-150 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1" data-bs-toggle="collapse" data-bs-target="#cons" aria-expanded="true" aria-controls="equip" href="Equipements"> Catégorie </div>
<a class=" link h6 mb-0 font-weight-bold text-gray-600" href="Mobilier médical" >Mobilier médical</a>
</div>
</div>
<div id="equip" class="collapse" aria-labelledby="headingTwo">
<ul class="ss_catg" style="list-style: none;">
@foreach ( $equips as $equip)
<li><a href={{route('produits', [$equip->id,'0'])}}> {{$equip->nom_ss_catg}} </a></li>
@endforeach
</ul>
</div>
</div>
</div>
</div>