Creating expandable and collapsible menu list with JavaScript

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:

Post Views: 327