Topic: How can I have 2 accordions without multiple panels opening at the same time?
BradleyByerly04 pro premium priority asked 9 months ago
Expected behavior When I click to open panel #1 on Accordion #1 Panel #1 of Accordion #2 doesn't open Actual behavior Panel #1 of Accordion #2 does open when Panel #1 of Accordion #1 is clicked
Grzegorz Bujański staff answered 9 months ago
I'm not sure if I understand correctly. You have two accordions on the page and you would like it so that after expanding one of the sections of accordion 1, it would not be possible to open another section in accordion no. 2? Is this accordion no. 2 a part of accordion no. 1? Can you prepare a snippet with an example of how you tried to do this?
Felix Weißenrieder premium answered 9 months ago
This part of the Accordion-Header
data-mdb-collapse-init
data-mdb-target="#collapseOne"
controls the target. The target in this case looks like this:
id="collapseOne"
data-mdb-collapse-item
You need to set data-mdb-target
to a value that describes the target with querySelector (see here for syntax). In this case "#collapseOne"
means we search for an HTML-element with an id (thats the semantic of "#"
) with the value "collapseOne"
. If you use distinct IDs for your HTML-elements everything should work. In other words I suspect that you used the same ID for both accordion panels. So in order to fix this alter the id
and the data-mdb-target
attribute of one of the accordions.If this does not help, then more elaboration on the probem is needed, like Grzegorz Bujański suggested.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.1.0
- Device: PC
- Browser: Vivaldi
- OS: Windows 11
- Provided sample code: No
- Provided link: No