Menu to change content (im stuck lol)

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;
        }
}

---

.
the function show does its job BUT
your global var *activeMenu* stops anything from happening because it evaluates to false in your if statements.
Maybe you meant to set it in the function show...

throw your relevant css in for us... please

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?

Code:

---

#menu1Area {
        visibility:hidden;
}
#menu2Area {
        visibility:hidden;
}
#menu3Area {
        visibility:hidden;
}
#menu4Area {
        visibility:hidden;
}
#menu5Area {
        visibility:hidden;
}

---

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;
        }
}

---

:rolleyes:

you have finally got JS to put an inline style in place to make it visible BUT the css you have in place overrides it...

when I do something like that I groan and yell *You silly B-u-g-g-a-r*:mad:

to get a better idea on how to do things like this check out the post request by *Haxxy* he wanted divs to show when you click an image.

you seem to want the same thing with a menu list...