Javascript code to hide/show the links in html ?

Discussion in 'HTML & Website Design' started by vinod827, May 27, 2009.

  1. #1
    how can i hide or show a links through javascript?
    can u help me with code of javascript? which method to call for it?
     
    vinod827, May 27, 2009 IP
  2. Ibrahim Kamal

    Ibrahim Kamal Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    you can make it

    <script>
    function show(obj)
    {
    obj = document.getElementById(obj).style;
    obj.display='block';
    }
    function hide(obj)
    {
    obj = document.getElementById(obj).style;
    obj.display='none';
    }
    </script>
    <div onmouseover="show('adiv')" onmouseout="hide('adiv')">Put Your Mouse Here</div>
    <div id="adiv" style="display:none;">
    Some text
    </div>
     
    Ibrahim Kamal, May 27, 2009 IP
  3. unigogo

    unigogo Peon

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    wrapper it up

    function toggle(id) {
    var el = document.getElementById(id);
    if ( el.style.display != 'none' ) {
    el.style.display = 'none';
    }
    else {
    el.style.display = 'block';
    }
    }
     
    unigogo, May 27, 2009 IP
  4. bindassdelhiite

    bindassdelhiite Active Member

    Messages:
    112
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    55
    #4
    Better use jQuery (a JavaScript framework).

    To show/hide links with this HTML structure..

    <div id="main">
        <a href="#">Hyperlink</a>
    </div>
    
    Code (markup):
    the jQuery code will be..

    $(' div#main a ').hide();          // for hiding links by default
    $(' div#main ').hover(function() {
        $(this).child("a").show();          // shows links on mouseIn
        },
        function() {
            $(this).child("a").hide();          // hides links on mouseOut
        });
    
    Code (markup):
    for more information on jQuery check - jQuery.com

    enjoy :)
     
    bindassdelhiite, May 30, 2009 IP
  5. mubheer

    mubheer Active Member

    Messages:
    340
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #5
    yeah j query is better for this. alternatively, the link can be put inside the div and toggle the div status on click or on focus will get the same effect. i hope the issue is already solved....
     
    mubheer, May 30, 2009 IP