How to close open DIVs when closed DIV is opened onClick

[hnovick]

Greetings all,

I am definitely a javascript newbie and have been reading as much as I can on this forum (and elsewhere) so as to not waste your time.

I am currently coding a scrolling header menu similar to the TimesPeople menu that can be found at http://nytimes.com.

The menu I am working on can be viewed at http://onclicktheme.tumblr.com.

Right now I'm using the following javascript to display hidden DIVs onClick:

<script type="text/javascript">
function part1() {
var part1 = document.getElementById('tagsheaderbox');
if ( part1.className == 'hidden' ) {
part1.className = 'visible';
} else {
part1.className = 'hidden';
}
}
</script>
<script type="text/javascript">
function part2() {
var part2 = document.getElementById('aboutheaderbox');
if ( part2.className == 'hidden' ) {
part2.className = 'visible';
} else {
part2.className = 'hidden';
}
}
</script>
<script type="text/javascript">
function part3() {
var part3 = document.getElementById('contactheaderbox');
if ( part3.className == 'hidden' ) {
part3.className = 'visible';
} else {
part3.className = 'hidden';
}
}



Here is the HTML/CSS that correlates with that Javascript:

<a onclick="part3(); part3c();" href="#"><div id="contactheader" class="contactheaderclosed"><p>CONTACT</p></div></a>

<a onclick="part2(); part2c();" href="#"><div id="aboutheader" class="aboutheaderclosed"><p>ABOUT</p></div></a>

<a onclick="part1(); part1c();" href="#"><div id="tagsheader" class="tagsheaderclosed"><p>TAGS</p></div></a>

.visible {
display: visible;
}

.hidden {
display: none;
}

#contactheaderbox {
width: 315px;
height: 250px;
background: #fff;
margin-left: 640px;
top: 37px;
position: fixed;
background: url(http://i34.tinypic.com/20qnkop.png) repeat-y;
}

#aboutheaderbox {
width: 315px;
height: 250px;
background: #fff;
margin-left: 640px;
top: 37px;
position: fixed;
background: url(http://i34.tinypic.com/20qnkop.png) repeat-y;
}

#tagsheaderbox {
width: 315px;
height: 250px;
background: #fff;
margin-left: 640px;
top: 37px;
position: fixed;
background: url(http://i34.tinypic.com/20qnkop.png) repeat-y;
}


My question is... How can I have open (class="visible") DIV's close (class="hidden") onClick of closed (class="hidden") DIV's?

I much appreciate any help in advance. Thank you.

[astupidname]

First, you had some improperly nested things like div's inside of 'a' tags as well as 'p' tags inside of 'a' tags, so I fixed those.
As you will see it is not necessary to have different functions for each div or for each different state of className either - it can be all handled from one function.
You will note I gave the div (which contains the 3 div's you wish to toggle) an id of "topHeadContentWrap" -just to be able to loop through the div's that are inside of it looking for div's that have className of "visible", see further notes inside of script. I also changed your function calls from the 'a' tags to match the new name I gave the function, and you will notice the function calls are passing the id of the element to show in them, and the onclicks have a return false; in them to prevent the 'a' tags default action from occurring.

Throw out all your other scripts you had in the page for toggling the divs and replace with the following script (also just for your info, different functions can be contained inside of the same set of script tags, no need for different set of script tags for each function):

<script type="text/javascript">
//pass the id (in single quotes) of the div you wish to show, in the function call
function toggle(elemId){ 
  var a = document.getElementById(elemId);
//get all the divs inside the topHeadContentWrap div (I gave it an id, it did not have one before)
  var b = document.getElementById("topHeadContentWrap").getElementsByTagName('div');
//loop through all the divs in the topHeadContentWrap id'd div 
  for (var i = 0; i < b.length; i++) { 
//if they don't have an identical id to the div we want to show, hide them. The && b[i].id != elemId allows to toggle the div later
    if (b[i].className === "visible" && b[i].id != elemId) { 
      b[i].className = "hidden";
    }
  }
//toggle the div we are showing - if it is already shown, successive clicks will hide or show it
  a.className = (a.className === "visible")?"hidden":"visible";
}
</script>

Then make the following changes inside of your html:

<div class="tophead"> <!-- just posting this as a starting reference point -->

<div id="topHeadContentWrap" class="topheadcontentwrap"> <!-- Note the id that has been added to this div -->

<div id="avatarheader"><p><a href="/"><img src="/images/default_avatar_24.gif" width="24" height="24" border="0" alt="onClick"/></a></p></div>

<div id="titleheader"><h6><a href="/">onClick</a></h6></div>

<div id="contactheader" class="contactheaderclosed"><p><a onclick="toggle('contactheaderbox'); return false;" href="#">CONTACT</a></p></div>

<div id="aboutheader" class="aboutheaderclosed"><p><a onclick="toggle('aboutheaderbox'); return false;" href="#">ABOUT</a></p></div>

<div id="tagsheader" class="tagsheaderclosed"><p><a onclick="toggle('tagsheaderbox'); return false;" href="#">TAGS</a></p></div>
<!-- end of my changes to your html -->

[hnovick]

Thank you so much for your detailed help.

[astupidname]

You're welcome, glad to help!