Accordion - collapsing opened element on opening another

Hi, I use Accordion from Sample UI Patterns. There are default interactions there which are good. But I want to change one thing there, i.e. to make sure that when one part of the accordion is opened, another part automatically closes.

For example, if I have three elements, I click on the first one, the first one expans. Then I click on the second one and the second one expans. In that way I have two elements expanded. I want different behavior, I want the first one to automatically collapse on the opening of the second one.

Can you share any advices, please, on how to best achieve it? Thank you!

@TheDesigner
You will need to add additional interaction to close other on click/tap. This can become lengthy to do as you have more and more items.
However, the example below is only applicable to the text widget and not applicable to the arrow/triangle. I would recommend disabling the triangle icon by editing the tree properties. You can always add an icon/triangle through characters/text.

You can also use the “classic menu vertical” and edit the style.


1 Like