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.