隐藏显示菜单getElementsByClassName

Question

I wanna make a hide/show menu in JavaScript. I must use getElementsByClassName in my menuHeader at least! I have fixed so I can hide and show only the first menuContent. I would like to click on one menuHeader so it opens the menuContent who is under the menuHeader! How can I do to hide and show the other content to(menuContent2) without making several functions? Is it possible? Can I fix this with a loop?

Here is my HTML code:

<a class="menuHeader">SPORT</a><br>
    <div class="menuContent">//**It only opens this Content no matter which menuHeader I click on!**
    <a href="">Result</a><br>
    <a href="">Live</a><br>
    <a href="">Standing</a><br>
    </div>

    <a class="menuHeader">NEWS</a><br>
    <div class="menuContent2">
    <a href="">Local</a><br>
    <a href="">World</a><br>
    </div>

Here is my JavaScript code:

    function menuFunction(){

    var ele = document.getElementsByClassName("menuContent")[0];

    for(var i = 0; i < ele.length; i++)
    {
    ele[i];
    }


    if(ele.style.display == "none") {
            ele.style.display = "block";

    }
    else {
        ele.style.display = "none";

    }


}

   function init(){

   var menu = document.getElementsByClassName("menuHeader");
    for(var i = 0; i < pic.length; i++) {
    {
        menu[i].onclick = menuFunction;
    }

   }

   } 

   window.onload = init; 

//EDIT I fixed it, thanks Arun P Johny.

Answer 1

Because var ele = document.getElementsByClassName("menuContent")[0]; will always return the first element with the class menuContent .

 var menu = [].slice.call(document.getElementsByClassName("menuHeader"), 0); for (var i = 0; i < menu.length; i++) { menu[i].onclick = menuFunction; } var contents = document.getElementsByClassName("menuContent"); function menuFunction() { var ele = contents[menu.indexOf(this)]; if (ele.style.display == "none") { ele.style.display = "block"; } else { ele.style.display = "none"; } } 

 <a class="menuHeader">SPORT</a><br/> <div class="menuContent"> <a href="">Result</a><br/> <a href="">Live</a><br/> <a href="">Standing</a><br/> </div> <a class="menuHeader">NEWS</a><br/> <div class="menuContent"> <a href="">Local</a><br/> <a href="">World</a><br/> </div>