Topic: Accordion add .hoverable to .card

staehla pro asked 5 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-->

staehla pro answered 5 years ago


Hi Marta Thank you for the prompt reply. It worked great. Cheers Marco

Marta Wierzbicka staff answered 5 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

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No