How the next sibling works?

Question

I'm new on js and this is the first time I'm using the nextSibling selector, I'm trying to implement a dropdown menu. In the code below, I need to display the sub-menu when I click on a menu item. How can I fix this?

var k=document.getElementsByClassName("menu-title");
for(i=0;i < k.length ;i++)
  {
    k[i].addEventListener("click",function(){
      //alert("hai");
      this.nextSibling.style.display = "block";
    });
  }

html,body {
  width:100%;
  height:100%;
}

navbar{
  width:100%;
  height:50%;
  background-color:green;
  float:left;
}

main{
  float:left;
  width:100%;
  height:50%;
  background-color:yellow;
  
}
.nav-sec-level{
  color:white;
  background-color:aqua;
  display:none;
  }
.menu-title{
  cursor : pointer;
  }

<navbar>
  <ul>
    <li class="menu-title">Fruits
      <ol class="nav-sec-level">
        <li>Mango</li>
        <li>Apple</li>
      </ol>
    </li>
    <li class="menu-title">Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li class="menu-title">Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li class="menu-title">Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Colours
      <ol class="nav-sec-level">
        <li>Red</li>
        <li>Green</li>
      </ol>
    </li>
  </ul>
</navbar>
<main>
</main>

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

What you are looking for is not nextSibling as it will give you next node at same level. You should search inside this for nav-sec-level and toggle visible.

Sample

var k = document.querySelectorAll(".menu-title");
for (i = 0; i < k.length; i++) {
  k[i].addEventListener("click", function() {
    var subMenu = this.querySelector('.nav-sec-level');
    if(subMenu.style.display === 'block')
      subMenu.style.display = 'none';
    else
      subMenu.style.display = 'block'
  });
}

html,
body {
  width: 100%;
  height: 100%;
}
navbar {
  width: 100%;
  height: 50%;
  background-color: green;
  float: left;
}
main {
  float: left;
  width: 100%;
  height: 50%;
  background-color: yellow;
}
.nav-sec-level {
  color: white;
  background-color: aqua;
  display: none;
}
.menu-title {
  cursor: pointer;
}

<navbar>
  <ul>
    <li class="menu-title">Fruits
      <ol class="nav-sec-level">
        <li>Mango</li>
        <li>Apple</li>
      </ol>
    </li>
    <li class="menu-title">Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li class="menu-title">Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li class="menu-title">Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Colours
      <ol class="nav-sec-level">
        <li>Red</li>
        <li>Green</li>
      </ol>
    </li>
  </ul>
</navbar>
<main>
</main>

ok ,so how i get the next element is there any selectors like nextSibling? — , Nov 16 '16 at 06:06
For that, you should use `nestSibling`. You can refer following post: http://stackoverflow.com/questions/842336/is-there-a-way-to-select-sibling-nodes — Rajesh, Nov 16 '16 at 06:14

How the next sibling works?

1 Answers1

Sample