Card collapse without using accordion

lede asked 2 months ago

I think this should be added to the collapse page so we can have cards collapsing without an accordion

<div class="card">
  <div class="card-header">
    <a data-toggle="collapse" href="#collapseContent46" class="collapsed" aria-expanded="false" aria-controls="collapseContent46">
      <h5 class="mb-0">Content <i class="fa fa-angle-down rotate-icon float-right"></i></h5>
    </a>
  </div>
  <div id="collapseContent46" class="card-body collapse"> 
  </div>
</div>

<div class="card">
  <div class="card-header">
    <a data-toggle="collapse" href="#collapseContent47" aria-expanded="true" aria-controls="collapseContent47">
      <h5 class="mb-0">Content <i class="fa fa-angle-down rotate-icon"></i></h5>
    </a>
  </div>
  <div id="collapseContent46" class="card-body collapse show"> 
  </div>
</div>

Then I just added the couple of .accordion .card styles to just .card to make the rotate-icon float right and rotate on expand/collapse.

.card .rotate-icon {
  float: right;
}

.card a:not(.collapsed) .rotate-icon {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

This allows the cards to collapse independently with the same effect that you have on the accordion collapsing


Bartłomiej Malanowski commented 2 months ago

So much thank you for the tip! I've added your solution to our TODO list


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No