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 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2004
    Location
    Ontario, Canada
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Make a div hidden while showing another div

    If you check this page out you should see a header, a nav menu on the left and and scrollable box on the right. If you scroll down to the bottom of the box you should see it doesn't contain much text. If you click a "link" in the nav menu and look at the box again you should see two things have happened. One, the scroll bar (the one you drag up and down) should be smaller; and two, when you scroll down there should be more text.
    I wrapped my content in divs and gave them each an ID. I then used a modified version of the script below http://www.codingforums.com/showthread.php?t=237 to hide/show each div when the corresponding "link" in the nav menu was clicked.
    PHP Code:
    <html>
    <
    head>
    <
    title>Toggle hide/show of an elementIE4IE5NS6</title>
    <
    script language="javascript1.2" type="text/javascript">
    <!--
    function 
    toggle(id){

    dom document.getElementById 0;
    ie4 = (document.all && !dom) ? 0;
    opera = (navigator.userAgent.indexOf('Opera')!=-1) ? 0;
    supported = ((dom||ie4) && !(opera)) ? 0;

    if(!
    supported)
    return;

    if (
    dom && !document.all)
    document.all document.getElementsByTagName("*")

    obj = (dom) ? document.getElementById(id) : document.all(id)

    if(
    obj.style.visibility=='hidden')
    obj.style.visibility='visible';

    else
    obj.style.visibility='hidden';

    }
    //-->
    </script>

    <style type="text/css">
    <!--
    .myStyle { position:absolute; left: 318px; top:15px; background-color:#cccccc }
    //-->
    </style>

    </head>

    <body>

    <div id="layermenu" class="myStyle" onmouseover="toggle('layermenu')" onmouseout="toggle('layermenu')">Text in here will disappear onmouseover and re-appear onmouseout</div>

    </body>
    </html> 
    What I am trying to figure out is, when a "link" is clicked how to hide the content that is currently showing and at the same time show the content that corresponds with the "link".


    Nite

  • #2
    Regular Coder
    Join Date
    Dec 2002
    Location
    Minneapolis, MN
    Posts
    208
    Thanks
    0
    Thanked 1 Time in 1 Post
    anthony


  •  

    Posting Permissions

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