Topic: Card collapse without using accordion
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 FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Open
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Bartłomiej Malanowski staff pro premium commented 6 years ago
So much thank you for the tip! I've added your solution to our TODO list