Grow your CSS skills. Land your dream job.

show() hide() jquery

  • # September 4, 2012 at 10:06 am

    I want to hide an element by default and when a div is clicked I want to show the hidden element.
    I’m doing something like this:

    $("#searchbox").hide(); // Hide by default
    $("button").click(function() {

    My question is how to display the #searchbox when that element is clicked and hide it again when another div is clicked

    # September 4, 2012 at 10:57 am

    I guess this would work, but I’m not sure I understood what you want. :D

    $('#searchbox').hide();
    $('.div-triggering-searchbox-hiding').click(function(){
    $('#searchbox').hide();
    }
    $('#button-triggering-searchbox-showing').click(function(){
    $('#searchbox').show();
    }
    # September 4, 2012 at 11:03 am
    $("#searchbox").hide(); // Hide by default
    $("button").click(function() {
    $("#searchbox").toggle();
    });
    # September 4, 2012 at 1:48 pm

    CSS:

    #searchbox { display: none; }

    JS:

    $("button").click(function() {
    $("#searchbox").toggle();
    });

    By setting the default in CSS you can guarantee you won’t see it then have it flash away.

    # September 4, 2012 at 2:25 pm

    The only problem is that the search form isn’t accessible at all if js doesn’t load for whatever reason :(

    But if you’re loading up modernizr in the head very early you could do this:

     

    #searchbox { display: none;  }
    .no-js #searchbox { display: block }

    $("button").click(function() {
    $("#searchbox").toggle();
    });

    You shouldn’t see the flash unless you have a reeeaally slow connection.

    # September 4, 2012 at 4:51 pm

    Perfecto.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".