Here is JavaScript & HTML source code to show you how to make expandable and collapsible menu list.
<!DOCTYPE html> <html> <head> <title>Expand and Collapse Menu</title> <style> #menuTop, #menuTop ul{ cursor:default; list-style-type:circle } #menuTop .m{ list-style-type:disc } #menuTop ul{ display:none } </style> <script> function showHide(ev){ ev=ev||window.event var elem=(ev.target||ev.srcElement).getElementsByTagName("UL")[0] if(!elem)return; elem=elem.style; elem.display=(elem.display!='block')?'block':'none' } </script> </head> <body> <ul onclick="showHide(event)" id="menuTop"> <li>Tutorial</li> <li class="m">Menu 1 <ul> <li class="m">JavaScript <ul> <li class="m">Tutorial JavaScript <ul> <li>JavaScript for Beginner</li> <li>Intermediate JavaScript</li> </ul> </li> </ul> </li> <li>Java</li> </ul> </li> <li class="m">Menu 2 <ul> <li class="m">Another Menu <ul> <li>Sub Menu 1</li> <li>Sub Menu 2</li> <li>Sub Menu 3</li> </ul> </li> </ul> </li> <li>Donate!</li> </ul> </body> </html>
Here is the live result:
loading...