Hello all,
So I have this code I have been trying to get working for a while now. I have it very close to working (I think). I am a noob to JS but learning fast.
Basically I have a menu with 5 options and 5 divs, I would like the content to show when the matching menu item is clicked. I have set the CSS property
to invisible for the divs. Any help is greatly appreciated
HTML Code:
<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>
Code:
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;
	}
}