html - toggle child of clicked class pure Javascript - no JQuery -

i have 2 toggles class .submenu-toggle , contain ul child class .submenu. happen when user clicks on .submenu-toggle ul child(.submenu) of class(submenu-toggle) shown , when clicked again hidden.

i need achieve using pure javascript without jquery.

if you're able let me know how hide .submenu if user clicks outside element... awesome!

thanks time , help.

here current javascript:

      // drop down menus       var subtoggle = document.getelementsbyclassname("submenu-toggle");       var menu = subtoggle.children;        (var = 0; < subtoggle.length; i++) {           subtoggle.item(i).onclick = function () {                menu[1].style.display = "block";           }       } 

here current html:

<ul>      <li class="submenu-toggle"><a href="#">menu 1</a>         <ul class="submenu">             <li></li>             <li></li>             <li></li>             <li></li>             <li></li>         </ul>     </li>     <li class="submenu-toggle"><a href="#">menu 2</a>         <ul class="submenu">             <li></li>             <li></li>             <li></li>             <li></li>             <li></li>         </ul>     </li> </ul> 

you menu css. here's example vanilla javascript:

// js var submenu = document.getelementsbyclassname("submenu-toggle");  (var = 0; < submenu.length; i++) {     submenu[i].addeventlistener('click', menus, false); }  function menus() {   var menu = this.queryselector('.submenu');   menu.classlist.toggle("hidden"); };  // css  .hidden {    display: none; } 

http://codepen.io/paulcredmond/pen/oyxyrq