Connecting Tech Pros Worldwide Help | Site Map

hiding divs with multiple clicks

Newbie
 
Join Date: Mar 2008
Posts: 1
#1: Mar 11 '08
Hi there,

my problem is the following: I'd like to hide certain parts of a site using javascript; and I want to use it as a cycle (eg: first click - header div disappearance; second click - menu disappearance; third click - content disappearance; fourth click - show all divas again);
I have a content like (simplified):

[HTML]<html>
<head>
<script language="javascript">
function toggleDiv(divid){
if(document.getElementById(divid).style.display == 'none'){
document.getElementById(divid).style.display = 'block';
}else{
document.getElementById(divid).style.display = 'none';
}
}
</script>
</head>
<body>
<div id="main">
<a href="javascript:;" onmousedown="toggleDiv('header');">Show/hide div</a>
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content">Content</div>
</div>
</body>
</html>[/HTML]

as I'm not a great JS expert, I could only make one div disappear and appear again, but I'm stuck with this cycle. Do you have an idea how to solve this problem?
Thanks indeed:

ati
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#2: Mar 12 '08

re: hiding divs with multiple clicks


There are a number of ways you could this. One way is to use an array and store the div ids. Keep a pointer variable to the current div to be hidden and then use that to determine which div to hide. Once a div is hidden, increment the pointer until all divs are hidden after which it can be reset.
Reply


Similar JavaScript / Ajax / DHTML bytes