Light
Dark
System
Ask  Question

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
G
Guest 3 months ago
HTML Bootstrap 5
8 Answers
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 (8)

S
Sean Author3 months ago
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.
G
Guest 3 months ago
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
S
Sean Author3 months ago
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.
G
Guest 3 months ago
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
S
Sean Author3 months ago
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.
G
Guest 3 months ago
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
S
Sean Author3 months ago
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.
G
Guest 3 months ago
Hello,

Great, thank you for your assistance!
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  :(

Metronic

Go to MetronicDownloadsPurchase MetronicRefunds

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle