hiding divs with multiple clicks

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • agtalpai
    New Member
    • Mar 2008
    • 1

    hiding divs with multiple clicks

    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="javas cript">
    function toggleDiv(divid ){
    if(document.get ElementById(div id).style.displ ay == 'none'){
    document.getEle mentById(divid) .style.display = 'block';
    }else{
    document.getEle mentById(divid) .style.display = 'none';
    }
    }
    </script>
    </head>
    <body>
    <div id="main">
    <a href="javascrip t:;" onmousedown="to ggleDiv('header ');">Show/hide div</a>
    <div id="header">Hea der</div>
    <div id="menu">Menu </div>
    <div id="content">Co ntent</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
    Last edited by gits; Mar 11 '08, 02:13 PM. Reason: added code tags
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    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.

    Comment

    Working...