Accordion with a photo in the background doesn\&#039;t p

Topic: Accordion with a photo in the background doesn\'t produce what\'s shown.

joshusre pro asked 7 years ago

According with a photo doesn't look like what's shown when you use the given html / css example. Please provide the source the produces the example.

<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 -->

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

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

Add comment

joshusre pro answered 6 years ago

0 0 Best answer

Even the copy buttons in the examples don't work. I sincerely regret purchasing this library. It was my worst decision of 2017

Add comment

joshusre pro answered 6 years ago

0 0 Best answer

Here's a similar problem: https://mdbootstrap.com/components/tabs/ Classic tabs ALSO doesn't work as advertised. Can I have the working code for that now.

Add comment

joshusre pro answered 6 years ago

0 0 Best answer

Here's a similar problem: https://mdbootstrap.com/components/tabs/ Classic tabs ALSO doesn't work as advertised. Can I have the working code for that now.

Add comment

Marta Wierzbicka staff answered 7 years ago

0 0 Best answer

Hi,

I'm sorry if there are bugs in our accordion documentation but we are during updating our whole documentation and it should be fixed soon. Now, please try this HTML code:

<div class="accordion accordion-5" id="accordionEx5" role="tablist">

<div class="card mb-4">

<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>

<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>

<div class="card mb-4">

<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>

<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>

<div class="card mb-4">

<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>

<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>

</div>

</div>
</div>
</div>

</div>
</code>

Best,

Marta

Please insert min. 20 characters.

Hi, I'm sorry if there are bugs in our accordion documentation but we are during updating our whole documentation and it should be fixed soon. Now, please try this HTML code:

<!-- 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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

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

joshusre

Pro User 8Support score
4Questions 3Answers 0Snippets