I am making a page about acrobatics. I want to make a menu where the user clicks on a type of acrobatics, then more menu items pop out. Then when the user clicks on one of those items a video plays.
So the user wants to see icarian backflips. He clicks on Icarian, then the icarian menu pops up. The user clicks on backflips and then a video plays in the menu. When the user clicks on backflips again the video closes. When he clicks on Icarian section again the menu collapses. I want the menu to stack vertically so it will work well on mobile portrait.
Acrobatics
Icarian
-Front Flips
-Back Flips
Youtube Video plays
Trapeze
Cyr Wheel
What is the best way to do this? I want to make something I like on the first try because I have a huge amount of information to put in this menu. Thank you for your time. Your help would be greatly appreciated.
If you want to see the whole index so far you can see it in this google doc
https://docs.google.com/document/d/1804EIsjr5kIa5Z-29NT1jF6Xk7YHovJj1nLOtYz8unY/edit?usp=sharing
Here is my site Read-Only: LINK
(how to share your site Read-Only link)