How to expand only 1 dropdown at a time while closing the others


I have some dropdown items and currently you can open them all at the same time. This can be overwhelming so I want that users can only see one expanded dropdown item. And when you click on another dropdown item, the previous one collapses and the one you clicked will expand.

How to do this?


The common approach is to use your own accordion build with interactions. Demos are available in the forum and projects exist in the showcase. The functionality of dropdowns is hardcoded with the element.

technically I didn’t use the dropdown functionality, It’s just a string of animations. I just called it that way so it makes it easier to understand. Uhmm Okay, do you have a link to one of those demos?

The forum is searchable. I used “accordion” and found this one which looks like a fit => Accordian: auto close when I select a new tab?