Toggle using pure JavaScript

Question

<script>
function toggleMenu() {
    var thisMenu = document.getElementById(id).getElementsByTagName('ul')[0];
    if( thisMenu.style.display == 'block' ) {
        thisMenu.style.display = 'none';
    } else { 
        thisMenu.style.display = 'block';
    }
    return thisMenu;
}

<li class="NavLinks test2" id="menuItem">
    <a onclick="toggleMenu('menuItem');">Tutorial</a>
    <ul>
        <li><a href="http://www.google.com">google</a></li>     
        <li><a href="http://www.yahoo.com">yahoo</a></li>
    </ul>
</li>

</script>

**description********

onClick on Tutorial hide's the submenu items but if I click on Tutorial and hover over submenu items and hovers out the item list item are not hiding. Please let me know if my code needs to modify.

Nadh · Accepted Answer · 2012-04-27 18:08:28Z

1

You haven't defined the id argument.

Change

function toggleMenu(){

to

function toggleMenu(id){

answered Apr 27, 2012 at 18:08

Nadh

7,2633 gold badges23 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sai Over a year ago

I have pasted wrongly. i have tried your code as well. List iteams are not hidding.

Nadh Over a year ago

You sure it's not working? I just tested it and it works. It takes more than one click initially though. Change the if condition to this and try if(thisMenu.style.display == '' || thisMenu.style.display == 'block')

sai Over a year ago

After clicking the Tutorial google and yahoo i can see it but if you just hover over google and move your cursor out of google, google and yahoo wont be hidden

Nadh Over a year ago

They are not hiding on mouseout because you've only assigned the onclick event. To show/hide on mouseover and out, you have to add the onmouseover and onmouseout events to the inner <ul>.

Alex Sexton · Accepted Answer · 2012-04-27 18:09:01Z

0

Currently, your toggleMenu function does not take any arguments. Also your html is inside of your script tag

<script>
function toggleMenu( id ){
  var thisMenu = document.getElementById(id).getElementsByTagName('ul')[0];
  if( thisMenu.style.display == 'block' ) {
    thisMenu.style.display = 'none';
  }
  else {
    thisMenu.style.display = 'block';
  }
  return thisMenu ;
}
</script>
<li class="NavLinks test2" id="menuIteam">
<a onclick="toggleMenu('menuIteam');">Tutorial</a>
<ul>
<li><a href="http://www.google.com">google</a></li>     
<li><a href="http://www.yahoo.com">yahoo</a></li>
</ul>
</li>

answered Apr 27, 2012 at 18:09

Alex Sexton

10.4k2 gold badges32 silver badges41 bronze badges

1 Comment

sai Over a year ago

I have pasted wrongly. I tried the below code as well: <script> function toggleMenu( id ){ var thisMenu = document.getElementById(id).getElementsByTagName('ul')[0]; if( thisMenu.style.display == 'block' ) { thisMenu.style.display = 'none'; } else { thisMenu.style.display = 'block'; } return thisMenu ; } </script> <li class="NavLinks test2" id="menuIteam"> <a onclick="toggleMenu('menuIteam');">Tutorial</a> <ul> <li><a href="google.com">google</a></li> <li><a href="yahoo.com">yahoo</a></li> </ul> </li>

Collectives™ on Stack Overflow

Toggle using pure JavaScript

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related