Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2005
    Location
    Scottish Borders, UK
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    onclick show/hide divs

    I've lost count of the scripts I've been through trying to find what I'm after and my kindergarten Javascript just isn't up to this.

    I have a calendar with linked dates which, when onclick is activated, unhide a div further down the page which has content telling the user what's happening on that day. So far so good.

    What I can't find the solution for is this. When the user clicks on another date, I want the content div for the new date to REPLACE the div containing the content for the first date WITHOUT the user having to click on anything to turn the visible state for the first date off first. In other words, the onclick event needs to restore the first div to its default display:none state as well as changing the state of the new date's div to visible.

    I would like the page to load with no content displayed for any of the dates, so the first date clicked will not have any content to hide before it's displayed. I'm guessing the function code might need to take account of that?

    Can anyone help me out here?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #tst DIV{
     display:none;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var Lst=false;
    
    function Div(id){
     if (Lst)Lst.style.display='none';
     Lst=document.getElementById(id);
     Lst.style.display='block';
    }
    /*]]>*/
    </script></head>
    
    <body>
    <a onclick="Div('d1')" >Div d1</a>
    <a onclick="Div('d2')" >Div d2</a>
    
    <div id="tst">
    <div id="d1" >d1</div>
    <div id="d2" >d2</div>
    </div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    xanti (07-28-2009)

  • #3
    New Coder
    Join Date
    Mar 2005
    Location
    Scottish Borders, UK
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Cool. Many thanks Vic. That's much more elegant than a solution I found in the meantime.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •