Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Accordion parent is not set correctly when setting with Javascript

See original GitHub issue

It appears that setting the parent of an accordion with Javascript (as described in the docs) does not set the data-parent attribute on the DOM element. This causes the element to not collapse when another element is selected.

I suspect the problem is related to collapse.js#132

Steps to reproduce

Take the example from the docs and convert the first card to be initialized with JS instead of HTML.
- JS FIDDLE: https://jsfiddle.net/4ykrjwgo/3/
Open Card 2
Open Card 1
- Observe Card 2 collapses as expected
Open Card 2
- Observe Card 1 does not collapse as expected

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

mdocommented, Jan 10, 2021

I think we need to update the Collapse docs to remove the mention of explicitly tying parent to the .card class now that we have Accordion in v5: https://getbootstrap.com/docs/5.0/components/accordion/.

Is there something else to do here beyond that?

0reactions

mdocommented, Apr 13, 2022

Closing as stale for v4. We’ll be moving onto focus entirely on v5 and v4 will only see critical updates.

Top Results From Across the Web

Accordion not working correctly (active states not being ...

Each accordion group is contained within .accordionRepeater__wrapper and for each instance of that class, I'm trying to get the first . · Only ......

Accordion error when setting parent - Wappler Community

When i set the Parent on a dynamic collapse, it breaks with this error: Without Parent, the Cards work fine but stay open....

Collapse - Bootstrap

The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific...

Bootstrap JS Collapse Reference - W3Schools

Note: The data-parent attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item...

Accordion Widget | jQuery UI API Documentation

This widget requires some functional CSS, otherwise it won't work. ... Initialize the accordion with the classes option specified, changing the theming for ......