Presented below is my menu design:
<div class="span2 main-menu-span">
<div class="well nav-collapse sidebar-nav">
<ul class="nav nav-tabs nav-stacked main-menu">
<li class="nav-header hidden-tablet"><span id="menu1" style="cursor: pointer; cursor: hand;" onClick=checkMenu('menu1')>-</span> Main 1</li>
<li id='menu1a'><a class="ajax-link" href="menu1a.php"><span class="hidden-tablet">Menu 1 a</span></a></li>
<li id='menu1b'><a class="ajax-link" href="menu1b.php"><span class="hidden-tablet">Menu 1 b</span></a></li>
</ul>
</div>
</div>
I aim to allow users to hide a section by clicking on the '-' symbol, which should then change to a '+'. However, currently when I press it again, the section does not reappear.
function checkMenu(idVal){
var idValue = idVal;
//alert("Mwnu value :" +idValue);
//alert("Mwnu value :" +document.getElementById(idValue).innerHTML);
if(document.getElementById(idValue).innerHTML=="+"){
if(idValue == "menu1" ){
//alert("Mwnu value :" +idValue);
document.getElementById("menu1a").style.display="block";
document.getElementById("menu1b").style.display="block";
document.getElementById("menu1").innerHTML ="-" ;
}
}
if(document.getElementById(idValue).innerHTML=="-"){
if(idValue=="menu1"){
//alert("Mwnu value :" +document.getElementById("menu1a").style.display);
document.getElementById("menu1a").style.display="none";
document.getElementById("menu1b").style.display="none";
document.getElementById("menu1").innerHTML ="+" ;
}
}