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 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts

    onclick showhide

    hello i'm trying to figure this thing out, the solution is probably very simple but i lack the skills

    what i'm trying to accomplish is for instance when you click on 'menu' and then on 'content1' and after that on 'content2' that 'test1' automatically closes so there will never be more than one 'test' link visible..
    i do want the content1&2 links to stay visible!

    another problem: i have to click the content links twice for them to open.. i also need a solution for that bit

    <html>

    <script language="javascript">
    <!--

    var state = 'none';

    function showhide(layer_ref) {

    if (state == 'block') {
    state = 'none';
    }
    else {
    state = 'block';
    }
    if (document.all) { //IS IE 4 or 5 (or 6 beta)
    eval( "document.all." + layer_ref + ".style.display = state");
    }
    if (document.layers) { //IS NETSCAPE 4 or below
    document.layers[layer_ref].display = state;
    }
    if (document.getElementById &&!document.all) {
    hza = document.getElementById(layer_ref);
    hza.style.display = state;
    }
    }
    //-->
    </script>

    <head>
    <style type="text/css">
    body
    </style>
    </head>

    <body>
    <p><a href="#" onclick="showhide('div1');">MENU</a></p>

    <div id="div1" style="display: none;"><a href="#" onclick="showhide('div2');">CONTENT1</a><br>
    <a href="#" onclick="showhide('div3');">CONTENT2</a><br>

    <div id="div2" style="display: none;"><a href="#" onclick="showhide('div2');">TEST1</div>
    <div id="div3" style="display: none;"><a href="#" onclick="showhide('div3');">TEST2</div>






    </div>

    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Mar 2011
    Posts
    148
    Thanks
    0
    Thanked 20 Times in 20 Posts
    Hy
    For the second question, you can use the ondblclick attribute, instead of "onclick"

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    Quote Originally Posted by verkeerd View Post
    what i'm trying to accomplish is for instance when you click on 'menu' and then on 'content1' and after that on 'content2' that 'test1' automatically closes so there will never be more than one 'test' link visible..
    i do want the content1&2 links to stay visible!
    I don quite understand what you try to say by this. Are you trying to say that when user click 'content1', it will show 2 test links and 'content2' hide the 2 test links??

  • #4
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    But anyway, I've worked out already, see if it's what you want.

    <html>

    <script language="javascript">
    <!--

    function showhide(layer_ref) {

    if (layer_ref == 'menu') {
    document.getElementById('content1').style.display = 'block';
    document.getElementById('content2').style.display = 'block';
    }
    else if (layer_ref == 'content1') {
    document.getElementById('link1').style.display = 'block';
    document.getElementById('link2').style.display = 'none';
    }
    else if (layer_ref == 'content2') {
    document.getElementById('link1').style.display = 'none';
    document.getElementById('link2').style.display = 'block';
    }
    }

    //-->
    </script>


    <body>
    <div id="menu"><p><a href="#" onClick="showhide('menu');">MENU</a></p></div>

    <div id="content1" style="display:none"><a href="#" onClick="showhide('content1');">CONTENT1</a></div>
    <div id="content2" style="display:none"><a href="#" onClick="showhide('content2');">CONTENT2</a></div>

    <div id="link1" style="display:none"><a href="#" onClick="showhide('link1');">TEST1</a></div>
    <div id="link2" style="display:none"><a href="#" onClick="showhide('link2');">TEST2</a></div>


    </div>

    </body>
    </html>


  •  

    Posting Permissions

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