Accordion - Keeping all items collapsed
Hello,
I've downloaded the latest version of Demo 20 (v8.1.7) and I'm trying to use the accordion element just like it appears on your documentation here: https://preview.keenthemes.com/html/metronic/docs/base/accordion
But when I try to collapse all elements, it won't let me… It seems that it's forced to always have one item expanded.
After removing the plugins.bundle.js from the page, it seems to be working as expected. Is it a bug in the plugins script, or is it the expected behavior?
Thank you
Replies (9)
Hi,
Please try to remove data-bs-parent="#kt_accordion_1" attribute from accordions.
You can follow the Bootstrap According to official docs here.
Please let us know if you need any further help.
Regards.
Hello,
I tried your suggestion and I also copied the exact code from Bootstrap official docs, but it still doesn't work. Only way to make it work is to temporarily remove the plugins.bundle.js file.
I uploaded a short video that shows this behavior.
https://streamable.com/l7ii2o
Thanks
Hi,
It should work if you removed data-bs-parent="#kt_accordion_1" attribute for all according to elements. We just tested it without removing plugins.bundle.js:
Regards.
Hello,
I removed the "data-bs-parent" but now none of the items are collapsing.
Screen record: https://streamable.com/274fqi
Html:
<div class="accordion" >
<div class="accordion-item">
<h2 class="accordion-header" >
<button class="accordion-button fs-4 fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_1" aria-expanded="true" aria-controls="kt_accordion_1_body_1">
Accordion Item #1
</button>
</h2>
<div class="accordion-collapse collapse show" aria-labelledby="kt_accordion_1_header_1" >
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" >
<button class="accordion-button fs-4 fw-semibold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_2" aria-expanded="false" aria-controls="kt_accordion_1_body_2">
Accordion Item #2
</button>
</h2>
<div class="accordion-collapse collapse" aria-labelledby="kt_accordion_1_header_2" >
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" >
<button class="accordion-button fs-4 fw-semibold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_3" aria-expanded="false" aria-controls="kt_accordion_1_body_3">
Accordion Item #3
</button>
</h2>
<div class="accordion-collapse collapse" aria-labelledby="kt_accordion_1_header_3" >
<div class="accordion-body">
...
</div>
</div>
</div>
</div>Am I doing something wrong?
Thanks
Hi,
Your code has some missing parameters. You removed the accordion's body's actual ID attribute. Please try to use the below code instead:
<!--begin::Accordion-->
<div class="accordion" >
<div class="accordion-item">
<h2 class="accordion-header" >
<button class="accordion-button fs-4 fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_1" aria-expanded="true" aria-controls="kt_accordion_1_body_1">
Accordion Item #1
</button>
</h2>
<div class="accordion-collapse collapse show" aria-labelledby="kt_accordion_1_header_1">
<div class="accordion-body">
<strong>This is the first item"s accordion body.</strong> It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.
It"s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" >
<button class="accordion-button fs-4 fw-semibold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_2" aria-expanded="false" aria-controls="kt_accordion_1_body_2">
Accordion Item #2
</button>
</h2>
<div class="accordion-collapse collapse" aria-labelledby="kt_accordion_1_header_2">
<div class="accordion-body">
<strong>This is the second item"s accordion body.</strong> It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.
It"s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" >
<button class="accordion-button fs-4 fw-semibold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_3" aria-expanded="false" aria-controls="kt_accordion_1_body_3">
Accordion Item #3
</button>
</h2>
<div class="accordion-collapse collapse" aria-labelledby="kt_accordion_1_header_3">
<div class="accordion-body">
<strong>This is the third item"s accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate
classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
You can modify any of this with custom CSS or overriding our default variables. It"s also worth noting that just about any
HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
<!--end::Accordion-->Regards.
Hello,
I figured out what the problem was. It seems that the Bootstrap JavaScript package was interfering with the collapse/show toggle. According to your template, I realize I shouldn't reference the bootstrap JS (https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js) at all.
Am I understanding this correct? Because I remember on previous versions of Metronic (6 and 7) I always added references to both Bootstrap CSS and JS and never had any issues.
Thank you
Hi 
,
Oh yes, the latest Bootstrap 5.3.0 is included in the Metronic bundle as we deeply customize the Bootstrap sass files in order to match our design system so you should just remove the external Bootstrap includes and it should work as usual.
if you need any further help please do let us know.
Regards.
Your Support Matters!
Hello,
Great, thank you for your assistance!
