Nested accordion shouldn’t close parent when working in child

Our accordion currently works as follows:

If you click on an item inside the accordion it opens the accordion if there is content under it and it opens a screen next to it. If you click on an open accordion item it closes it. You can navigate to deeper levels by clicking each level. If you click on another item on the same level it closes the others if there is anything open. (so if you click root parent 2 or 3, root parent 1 will close)

Check out this codePen to see how the accordion currently works

Example accordion

The problem:

For example: If you are working on the screen of child 3 and want to return to the screen of parent 1 for a short period of time, it closes the accordion so you'd have to open parent 1 again if you want to return to child 3 which seems like bad a UX.

suggested solution by our team:

  • Just don't be able to close it by clicking an open accordion, and only being able to close it by clicking on something else on the same level or a higher level.

  • Only open and close the accordion by clicking on the chevrons.

  • single click to open the screen and double click to open the accordion.

Tags: