JavaScript code not working,can't hide/show div contents

Question

New to Stack Overflow and JavaScript as a whole.

I've been trying to make a simple function that changes the inline display attribute of a few div elements on click from "none" to "block". Tried different bits of code from similar questions on here,but no luck with any of them. Here's the code. Am sorry if I didn't format it correctly :(

Code:

 function toggleMenuItem(subGroupId) { subGroupIdStyle = document.getElementById('subGroupId').style; var see = subGroupIdStyle.display; if (see == 'none') { see = 'block'; } else { see = 'none'; } }; 

 <div id="content"> <p id="title">Computer <br>components</p> <p id="item1" class="menuitem" onclick="toggleMenuItem('subgroup1');">CPUs</p> <div id="subgroup1" style="display:none;"> &nbsp;&nbsp; + <a href="#" class="submenu">Intel</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">AMD</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">ARM</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">nVidia</a> </div> <p id="item2" class="menuitem" onclick="toggleMenuItem('subgroup2');">Motherboards</p> <div id="subgroup2" style="display:none;"> &nbsp;&nbsp; + <a href="#" class="submenu">Asus</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Asrock</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Foxconn</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Gigabyte</a> </div> <p id="item3" class="menuitem" onclick="toggleMenuItem('subgroup3');">Memory</p> <div id="subgroup3" style="display:none;"> &nbsp;&nbsp; + <a href="#" class="submenu">Samsung</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">A-Data</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Corsair</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Kingston</a> </div> <p id="item4" class="menuitem" onclick="toggleMenuItem('subgroup4');">Hard Drives</p> <div id="subgroup4" style="display:none;"> &nbsp;&nbsp; + <a href="#" class="submenu">Western Digital</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Seagate</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Toshiba</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Hitachi</a> </div> </div> 

Answer 1

You're not passing the variable when you wrap it in ' '

subGroupIdStyle = document.getElementById(subGroupId).style;

remove '' in subGroupId, that way you actually pass the variable string.

Also, instead of doing see = 'block'; do subGroupIdStyle.display = 'block' , same for else condition.

The code see = 'block' is not working because, you just copied the value of the subGroupIdStyle.display at the time, while you can use it to check the value, when you change the value of see it is not going to change the value of subGroupIdStyle.display . You should avoid using see altogether and use subGroupIdStyle.display in the place.

 function toggleMenuItem(subGroupId) { subGroupIdStyle = document.getElementById(subGroupId).style; var see = subGroupIdStyle.display; if (see == 'none') { subGroupIdStyle.display = 'block'; } else { subGroupIdStyle.display = 'none'; } }; 

 <div id="content"> <p id="title">Computer <br>components</p> <p id="item1" class="menuitem" onclick="toggleMenuItem('subgroup1');">CPUs</p> <div id="subgroup1" style="display:none;"> &nbsp;&nbsp; + <a href="#" class="submenu">Intel</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">AMD</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">ARM</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">nVidia</a> </div> <p id="item2" class="menuitem" onclick="toggleMenuItem('subgroup2');">Motherboards</p> <div id="subgroup2" style="display:none;"> &nbsp;&nbsp; + <a href="#" class="submenu">Asus</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Asrock</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Foxconn</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Gigabyte</a> </div> <p id="item3" class="menuitem" onclick="toggleMenuItem('subgroup3');">Memory</p> <div id="subgroup3" style="display:none;"> &nbsp;&nbsp; + <a href="#" class="submenu">Samsung</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">A-Data</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Corsair</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Kingston</a> </div> <p id="item4" class="menuitem" onclick="toggleMenuItem('subgroup4');">Hard Drives</p> <div id="subgroup4" style="display:none;"> &nbsp;&nbsp; + <a href="#" class="submenu">Western Digital</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Seagate</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Toshiba</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Hitachi</a> </div> </div> 

Answer 2

try this:

subGroupIdStyle = document.getElementById('subGroupId').style;

change to

subGroupIdStyle = document.getElementById(subGroupId).style;

Answer 3

Better use single line if condition .Variable passing was wrong.you are applying string instead of passing variable. you could use like this

                document.getElementById(subGroupId)

And see = 'block'; is not overwrite the element style.so you could use full of the style like variable.style.display="block"

 function toggleMenuItem(subGroupId) { var subGroupIdStyle = document.getElementById(subGroupId); subGroupIdStyle.style.display = (subGroupIdStyle.style.display =='none')?'block':'none'; } 

 <div id="content"> <p id="title">Computer <br>components</p> <p id="item1" class="menuitem" onclick="toggleMenuItem('subgroup1');">CPUs</p> <div id="subgroup1" style="display:none;"> &nbsp;&nbsp; + <a href="#" class="submenu">Intel</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">AMD</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">ARM</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">nVidia</a> </div> <p id="item2" class="menuitem" onclick="toggleMenuItem('subgroup2');">Motherboards</p> <div id="subgroup2" style="display:none;"> &nbsp;&nbsp; + <a href="#" class="submenu">Asus</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Asrock</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Foxconn</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Gigabyte</a> </div> <p id="item3" class="menuitem" onclick="toggleMenuItem('subgroup3');">Memory</p> <div id="subgroup3" style="display:none;"> &nbsp;&nbsp; + <a href="#" class="submenu">Samsung</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">A-Data</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Corsair</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Kingston</a> </div> <p id="item4" class="menuitem" onclick="toggleMenuItem('subgroup4');">Hard Drives</p> <div id="subgroup4" style="display:none;"> &nbsp;&nbsp; + <a href="#" class="submenu">Western Digital</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Seagate</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Toshiba</a> <br> &nbsp;&nbsp; + <a href="#" class="submenu">Hitachi</a> </div> </div> 

Answer 4

You have 2 mistake:

1- You shouldn't wrap the variable subGroupId in quote.

2- You can not change style of dom by:

  var see = subGroupIdStyle.display;
  if (see == 'none') {
    see = 'block';
  } else {
    see = 'none';
  }

use

subGroupIdStyle.display = 'block';