Topic: Accordion add .hoverable to .card
staehla pro asked 7 years ago
Hello MDB-Team
I just updated from MDB4.1.1 to MDB4.3.0.
Now i faced a problem with the accordion in combination with the .hoverable effect. It was working on the MDB4.1.1 but not with the newest version.
The old code was working with the .hoverable set to
<div class="panel panel-default hoverable">
.
With the MDB4.3.0 i had to change from <div class="panel panel-default hoverable">
to <div class="card hoverable">
but somehow the .hoverable does not work anymore. I tried to set the .hoverable to the <div class="card-header hoverable">
instead but the effect is not the same.
Is there a fix to get it back working or shall I continue with the MDB4.1.1?
Thank you in advance
Best regards
Marco
Example new code MDB4.3.0:
<!--Accordion wrapper-->
<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
<div class="card hoverable">
<div class="card-header" role="tab" id="headingOne">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h5 class="mb-0">
Collapsible Group Item #1 <i class="fa fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<div class="card hoverable">
<div class="card-header" role="tab" id="headingTwo">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h5 class="mb-0">
Collapsible Group Item #2 <i class="fa fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
</div>
<!--/.Accordion wrapper-->
Example old code MDB4.1.1:
<!--Accordion wrapper-->
<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
<!--First panel-->
<div class="panel panel-default hoverable">
<!--Panel heading-->
<div class="panel-heading" role="tab" id="headingOne">
<h5 class="panel-title">
<a class="arrow-r" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1<i class="fa fa-angle-down rotate-icon"></i>
</a>
</h5>
</div>
<!--Panel body-->
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
Anim pariatur cliche reprehenderit, enim eiusmod high life
</div>
</div>
<!--/.First panel-->
</div>
<!--/.Accordion wrapper-->
Add comment
staehla pro answered 7 years ago
Hi Marta
Thank you for the prompt reply. It worked great.
Cheers Marco
Marta Wierzbicka staff answered 7 years ago
Hello,
In new version of MDB 4.3.0, add class
.hoverable
to .card-header
in your HTML file and then add
.hoverable {
z-index: 1;
}
in your CSS file. It should works.
Best,
Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No