A simple slidedown menu that does not use inputs/labels to trigger any slide down/up sub menu.

Click/Tap any top level menu option to slide down the corresponding sub menu. Click the same top level menu option to close the sub menu, or click another top level menu option which will close any open sub menu and show its sub menu.

This is all done using html details/summary elements.

To only allow one 'details' sub menu to be open, all that is required is to have all 'details' with the same 'name' attribute.

<details name="reqs">
<summary class="tog">WOMEN</summary>
</details>

The only problem with this is that Firefox does not yet support details:name (July 2024) so I have added a small javascript routine just for Firefox (until it does finally support this option).

The detais/summary does not actually show any details content (which cannot be transitioned or animated) but is just used to trigger the slidedown sub menus using details[open] + div.

The slidedown animation uses display:grid and transition:grid-template-rows to transition the grid row from grid-template-rows:0fr; to grid-template-rows:1fr; which is the equivalent of height:0; to height:auto;

Finally I have removed the left default 'pointer' from the summary text and added an animated right pointer to indicate the slide down sub menu open.