Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (9)


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

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!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.

Hello,

Great, thank you for your assistance!



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



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:

<img src="https://i.imgur.com/nYkTWOi.png" class="w-100"/>

Regards.



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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(