How do I make this side navigation show just one sub menu at a time.

See more:

Javascript

CSS

HTML

I made a side navigation using HTML and CSS. Currently, it is static but I think some JavaScript could make it work.

By default, in the CSS, for each submenu body, I set the display to none (just to hide all the sub menus).

----------------------------------- What I want to achieve -----------------------------------

Whenever a user clicks on a Sub Heading, it slides downwards to reveal its sub-menu. When they click on the same Sub Heading again it closes by sliding upwards.

Also,

If a sub-menu was already opened and the user clicks on a different Sub-Heading, the initial sub menu closes, by sliding again.

Please, help me achieve this feature.

What I have tried:

See the full code here:
https://codepen.io/matthewdon/pen/KKQeVBW[^]