Awesome! Thank you for pointing that out. So I removed the first IF just to test. Now the div appears for a second (if that) then disappears again. I had this same problem when my code was completely different and numerous functions for each div. Any idea why it wont stick?
#menu1Area {
visibility:hidden;
}
#menu2Area {
visibility:hidden;
}
#menu3Area {
visibility:hidden;
}
#menu4Area {
visibility:hidden;
}
#menu5Area {
visibility:hidden;
}
<div class="main-area">
<div id="menu1" class="menu">
<ul>
<li><a href="">Menu 1</a></li>
</ul>
</div>
<div id="menu2" class="menu">
<ul>
<li><a href="">Menu 2</a></li>
</ul>
</div>
<div id="menu3" class="menu">
<ul>
<li><a href="">Menu 3</a></li>
</ul>
</div>
<div id="menu4" class="menu">
<ul>
<li><a href="">Menu 4</a></li>
</ul>
</div>
<div id="menu5" class="menu">
<ul>
<li><a href="">Menu 5</a></li>
</ul>
</div>
<br></br>
<div id="menu1Area" class="mainArea"><p>Text 1</p></div>
<div id="menu2Area" class="mainArea"><p>Text 2</p></div>
<div id="menu3Area" class="mainArea"><p>Text 3</p></div>
<div id="menu4Area" class="mainArea"><p>Text 4</p></div>
<div id="menu5Area" class="mainArea"><p>Text 5</p></div>
</div>
window.onload = show;
var activeMenu = null;
function show() {
var menus = new Array();
var allElems = document.getElementsByTagName("*");
for (var i = 0; i < allElems.length; i++) {
if (allElems[i].className == "menu") menus.push(allElems[i]);
}
for (var i = 0; i < menus.length; i++) {
menus[i].onclick = changeDiv;
}
}
function changeDiv(){
/*if (activeMenu) {*/
closeOldDiv();
menuID = this.id + "Area";
activeMenu = document.getElementById(menuID);
activeMenu.style.visibility="visible";
/*}*/
}
function closeOldDiv() {
if (activeMenu) {
activeMenu.style.visibility="invisible";
activeMenu = null;
}
}
