Topic: How can I have 2 accordions without multiple panels opening at the same time?

BradleyByerly04 priority asked 4 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

Felix premium answered 4 months ago

This part of the Accordion-Header


controls the target. The target in this case looks like this:


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.

Grzegorz Bujański staff answered 4 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?

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • 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