Topic: Accordion with a photo in the background doesn\'t produce what\'s shown.
<style>.accordion.accordion-5 .card { border: 0; background-color: transparent; } .accordion.accordion-5 .card .card-header { border: 0; background-color: #f44336; -webkit-transition: .3s; transition: .3s; } .accordion.accordion-5 .card .card-header:hover { -webkit-transition: .3s; transition: .3s; background-color: #455a64; } .accordion.accordion-5 .card .card-header .fa { background-color: #fff; border-top-left-radius: 3px; } .accordion.accordion-5 .card .card-body { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } </style><body><!-- Card --><!-- Card --><div class="accordion accordion-5" id="accordionEx5" role="tablist" aria-multiselectable="true"> <!-- Accordion card --> <div class="card mb-4"> <!-- Card header --> <div class="card-header p-0 z-depth-1" role="tab" id="heading30"> <a data-toggle="collapse" data-parent="#accordionEx5" href="#collapse30" aria-expanded="false" aria-controls="collapse30" class="collapsed"> <i class="fa fa-cloud fa-2x p-3 mr-4 float-left black-text" aria-hidden="true"></i> <h4 class="font-up white-text mb-0 py-3 mt-1"> Item #1 </h4> </a> </div> <!-- Card body --> <div id="collapse30" class="collapse" role="tabpanel" aria-labelledby="heading30" style=""> <div class="card-body rgba-black-light white-text z-depth-1"> <p class="p-md-4 mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p> </div> </div> </div> <!-- Accordion card --> <!-- Accordion card --> <div class="card mb-4"> <!-- Card header --> <div class="card-header p-0 z-depth-1" role="tab" id="heading31"> <a data-toggle="collapse" data-parent="#accordionEx5" href="#collapse31" aria-expanded="false" aria-controls="collapse31" class="collapsed"> <i class="fa fa-commenting-o fa-2x p-3 mr-4 float-left black-text" aria-hidden="true"></i> <h4 class="font-up white-text mb-0 py-3 mt-1"> Item #2 </h4> </a> </div> <!-- Card body --> <div id="collapse31" class="collapse" role="tabpanel" aria-labelledby="heading31" style=""> <div class="card-body rgba-black-light white-text z-depth-1"> <p class="p-md-4 mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p> </div> </div> </div> <!-- Accordion card --> <!-- Accordion card --> <div class="card mb-4"> <!-- Card header --> <div class="card-header p-0 z-depth-1" role="tab" id="heading32"> <a data-toggle="collapse" data-parent="#accordionEx5" href="#collapse32" aria-expanded="false" aria-controls="collapse32" class="collapsed"> <i class="fa fa-cogs fa-2x p-3 mr-4 float-left black-text" aria-hidden="true"></i> <h4 class="font-up white-text mb-0 py-3 mt-1"> Item #3 </h4> </a> </div> <!-- Card body --> <div id="collapse32" class="collapse" role="tabpanel" aria-labelledby="heading32"> <div class="card-body rgba-black-light white-text z-depth-1"> <p class="p-md-4 mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p> </div> </div> </div> <!-- Accordion card --></div><!-- Card -->
<!-- Card -->
<div class="card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);">
<!-- Content -->
<div class="rgba-black-strong py-5 px-4">
<div class="row d-flex justify-content-center ">
<div class="col-md-10 col-xl-8">
<!--Accordion wrapper-->
<div class="accordion accordion-5" id="accordionEx5" role="tablist">
<!-- Accordion card -->
<div class="card mb-4">
<!-- Card header -->
<div class="card-header p-0 z-depth-1" role="tab" id="heading30">
<a data-toggle="collapse" data-parent="#accordionEx5" href="#collapse30" aria-expanded="true" aria-controls="collapse30">
<i class="fa fa-cloud fa-2x p-3 mr-4 float-left black-text" aria-hidden="true"></i>
<h4 class="font-up white-text mb-0 py-3 mt-1">
Item #1
</h4>
</a>
</div>
<!-- Card body -->
<div id="collapse30" class="collapse show" role="tabpanel" aria-labelledby="heading30" data-parent="#accordionEx5">
<div class="card-body rgba-black-light white-text z-depth-1">
<p class="p-md-4 mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
shoreditch et.</p>
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card mb-4">
<!-- Card header -->
<div class="card-header p-0 z-depth-1" role="tab" id="heading31">
<a data-toggle="collapse" data-parent="#accordionEx5" href="#collapse31" aria-expanded="true" aria-controls="collapse31">
<i class="fa fa-commenting-o fa-2x p-3 mr-4 float-left black-text" aria-hidden="true"></i>
<h4 class="font-up white-text mb-0 py-3 mt-1">
Item #2
</h4>
</a>
</div>
<!-- Card body -->
<div id="collapse31" class="collapse" role="tabpanel" aria-labelledby="heading31" data-parent="#accordionEx5">
<div class="card-body rgba-black-light white-text z-depth-1">
<p class="p-md-4 mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
shoreditch et.</p>
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card mb-4">
<!-- Card header -->
<div class="card-header p-0 z-depth-1" role="tab" id="heading32">
<a data-toggle="collapse" data-parent="#accordionEx5" href="#collapse32" aria-expanded="true" aria-controls="collapse32">
<i class="fa fa-cogs fa-2x p-3 mr-4 float-left black-text" aria-hidden="true"></i>
<h4 class="font-up white-text mb-0 py-3 mt-1">
Item #3
</h4>
</a>
</div>
<!-- Card body -->
<div id="collapse32" class="collapse" role="tabpanel" aria-labelledby="heading32" data-parent="#accordionEx5">
<div class="card-body rgba-black-light white-text z-depth-1">
<p class="p-md-4 mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch
3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
shoreditch et.</p>
</div>
</div>
</div>
<!-- Accordion card -->
</div>
<!--/.Accordion wrapper-->
</div>
</div>
</div>
<!-- Content -->
</div>
<!-- Card -->
Best,
Marta
Dear joshusre,
could you explain what exactly is wrong with the classic tabs? When I pasted a code of these tabs from our documentation to my MDB package version 4.4.5 (the newest), everything works fine and I can't reproduce the problem. I'd like to help you, so, please, describe your problem in details and tell me what version of MDB you have.
Best,
Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No