Accordion page does not demonstrate JavaScript implementation

[alexhorner]

The Accordion page https://getbootstrap.com/docs/5.2/components/accordion/ does not have a Usage via JavaScript section like Modal and Collapse does.

Even though Accordion is documented to use Collapse under the hood, it is not clear how to construct a working Accordion using JavaScript. Using the Collapse JavaScript object's constructor on each of the Accordion elements breaks them, and it is not clear how to properly implement the Collapse.

Ideally, a Usage via JavaScript section would be added to Accordion explaining how to either construct an Accordion, or how to correctly construct a Collapse object such that all of the Accordion buttons and bodies work correctly, and when opening one Accordion segment, all other Accordion segments close, just like the non-JavaScript-created variant works right now.

This would be very useful for constructing a templated Accordion as a result of an XHR request. Right now, the result of creating a templated Accordion (with unique IDs as appropriate) is a non-functional Accordion.

I have not been able to find a workaround to this issue and I have ended up with a broken, non-functional Accordion with all bodies uncollapsed for now.

[alexhorner]

Hi, can I help add this to the docs?

Hi there, obviously I cannot answer this question as it is not my place to say, but if you have a solution, please could you also post it here do I can apply it to my production product?

Thanks!

[alexhorner]

Hi there,

Seems the person I responded to previously has deleted their commment,

Are we able to get any update on whether this is even possible please?

Thanks

[julien-deramond]

Are we able to get any update on whether this is even possible please?

Hi @alexhorner. Sorry for the delay but we have tons of things to tackle right now in Bootstrap with a very limited amount of time available. We'll get back to you asap :)

[Riiiad]

Seem that there is an issue while including JS from Bootstrap. It's working for me now, but in a really strange way. @alexhorner Can you post your JS includes.

[alexhorner]

Hi @Riiiad

My includes are quite basic. This is why I am puzzled as to how to correctly set up accordions via JavaScript. I am using WebPack with Bootstrap as a module. I do not see the appropriate import to make for an accordion. A collapse somewhat works but is very broken, obvsiously because a collapse is only one part of a fall accordion.

import {Tooltip as bsTooltip} from "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

Please note my general lack of familiarity with node, I have built my code simply based on modifying examples provided in various documentation

[Riiiad]

Can you just copy this and try:

import "bootstrap/dist/css/bootstrap.min.css";

// Just leave this include here it seems to be incluing the bootstrap js
import { Dropdown } from 'bootstrap';

document.querySelectorAll('[data-bs-toggle="dropdown"]')
  .forEach(dropdown => {
    new Dropdown(dropdown)
  })

[Riiiad]

Seems strange, but that will import everything from BS. Just the CSS part is from you, you need to check if it will find this path maybe also try: import "node_modules/bootstrap/dist/css/bootstrap.min.css";

[alexhorner]

Hi @Riiiad

CSS is not an issue. The only issue is that I have Accordions being created dynamically using javascript from a template. The accordions created from this template do not have a click action, and no examples are given in the documentation explaining how to add the collapsing click action to an accordion after page load.

Doing a querySelectorAll on [data-bs-toggle="dropdown"] will not work, because accordions are not Dropdown, they are Collapse and they have [data-bs-toggle="collapse"] on them.

Sorry if I did not explain this clearly, it is an odd issue to explain

[Riiiad]

Yes I have the same but it seem at lease for my Vite build everything is included from Bootstrap. Even just the Dropdown includes also Collapse.

If you Accordions are created via JS then just create them before the new Dropdown.

[alexhorner]

Yes I have the same but it seem at lease for my Vite build everything is included from Bootstrap. Even just the Dropdown includes also Collapse.

If you Accordions are created via JS then just create them before the new Dropdown.

I'm sorry, I don't follow. There are no dropdowns involved here at all.

[alexhorner]

Hi,

Just wanted to bump this one, just over a year since the last comment :P

This is still an issue, there does not appear to be any way to activate accordions dynamically using JS in the latest versions,

Thanks