when second parent menu is clicked show its submenu and hide the submenu of previously clicked parent menu

Question

I have a vertical menu with submenus and I want to show the submenu only if the parent was clicked ,showing only one submenu at a time. But the thing is when other parent menu is clicked its submenu is shown BUT the previous submenu also is seen. How do i hide the previous submenu?? please help . I am new to javascript. Here is my html-css-javascript code.

<div class="menu">
<ul >


  <li><a href="#" onclick= "Myfunction('cert')">Contacts</a>
   <div style="display: none;" id="cert">
           <ul >
                <li >Submenu 1</li>                                     
                <li>submenu 2</li>
           </ul>
    </div>
   </li>

  <li><a href="#"  onclick="Myfunction('defect')">About</a>
  <div style="display: none;" id="defect">
        <ul >
          <li>menu 1</li>
          <li>menu 2</li>
      </ul>
  </div>
  </li>

</ul>

script

function Myfunction(obj) { 
     var ele=document.getElementById(obj).style; 
         if(ele.display=="none") { 
            ele.display="block"; 
         } else { ele.display="none"; } 
} 

Answer 1

The easiest way will be using a global JavaScript variable, although it's not very elegant. Since you're not using any JavaScript libraries like eg jQuery everything else will turn into a pile of DOM-traversing spaghetti code.

var openEle = null;

function Myfunction(obj) {
    var ele = document.getElementById(obj);
    if (openEle != null) {
        openEle.style.display = "none");
    }
    if (ele.style.display == "none") {
        openEle = ele;
        ele.style.display = "block";
    } else {
        ele.style.display = "none";
    }
}

Answer 2

You can use this:

Demo here

var lastid;

function Myfunction(obj) {
    var ele = document.getElementById(obj).style;
    var elemLastId = document.getElementById(lastid);
    if (elemLastId != null) {
        elemLastId.style.display = "none";
    }
    lastid = obj;
    if (ele.display == "none") {
        ele.display = "block";
    } else {
        ele.display = "none";
    }
}

I made a new variable to remember the last ID. So you can call it and apply display:none to it.

Answer 3

<a class="Label">Contacts</a>
<div>
    <ul class="Submenu">
        <li>Menu 1</li>
        <li>Menu 2</li>
    </ul>
</div>

<a class="Label">About</a>
<div>
    <ul class="Submenu">
        <li>Menu 1</li>
        <li>Menu 2</li>
    </ul>
</div>

And :

(function($) {

    $(function() {

        $('.Label').on('click', function() {
            $('.Submenu').hide();
            $(this).next().find('.Submenu').show();
        });

    });

})(jQuery);

That's the jQuery approach. I'll let another couragous guy do it with native js :D