Show and Hide a div using jQuery

By | March 29, 2010

You may find yourself wanting to show and hide a section of your page from a button or a link. This is very easy with a little jQuery.

All you need to do is have a triggering object (an a tag in my example) and a target object (a div in my example)

You need to firstly ensure that jQuery is included in your project and is referenced on your page or master page. I am using a Master Page so I add the reference to that

I keep my jQuery library in a scripts folder so the reference in the head area looks like:

<script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

We then add some HTML into the content page (or MVC view in this case) like:

<h1>
        Show/Hide using jQuery</h1>
    <a id="showhidetrigger" href="#">show/hide</a>
    <div id="showhidetarget">
        This is the box that is hidden and shown.
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#showhidetarget').hide();

            $('a#showhidetrigger').click(function () {
                $('#showhidetarget').toggle(400);
            });
        });
    </script>

You can see the trigger a tag named showhidetrigger and the target div called showhidetarget and our jQuery script at the bottom.

The $(document).ready(function () { line is telling jQuery to execute when the page is ready and everything is loaded.

The $(‘#showhidetarget’).hide(); line is hiding the target div initially

And the $(‘a#showhidetrigger’).click(function () { $(‘#showhidetarget’).toggle(400); }); lines are telling the target div to toggle visible and invisible on the click event of the trigger a tag.

The jQuery Toggle method includes a nice smooth transition as well which makes it look great. You can speed up or slow down the transition by increasing or decreasing the transition parameter.

11 thoughts on “Show and Hide a div using jQuery

  1. Pingback: Creation of an ASP.NET MVC 2.0 application

  2. Sumit Thapar

    tHANK YOU SIR…..it was really a simple and very nice article .

  3. MockY

    Works like a charm. Easy to implement. Thanks.

  4. Thomas

    I am completely new to everything webdesign and jsquery, and I still managed to make it work, so thanks a lot, this is great!.
    However, I still have a question: I would like to ‘hide’ the initial link as soon as it is clicked.
    So in other words, the initially visible text (show/hide in your example) should be hidden when it is clicked. How should I go about this?

    Thanks in advance,
    Thomas (Belgium)

  5. Simon Holman Post author

    Thomas

    You should be able to use $(‘a#showhidetrigger’).hide(); in the click function but then you’d lose the ability to toggle so you might as well change the $(‘#showhidetarget’).toggle(400); to $(‘#showhidetarget’).show();

    Simon

  6. Thomas

    Simon,
    Wow, what a fast reply, thanks a lot! Like I said, I’m a complete novice, so I’ll give it a try. At first glance, everything looks like Chinese to me. But when looking closer, I think I understand your reply, and actually your suggestion to modify ‘toggle’ into ‘show’ makes sense, and it’s not a problem at all, I prefer it that way. Now all I have to do is figure out WHERE exactly to put your code :-)
    I’ll give it a try, and I will let you know in a couple of minutes!
    Kind regards,
    Thomas

  7. Thomas

    Dear Simon,
    I’ve tried putting your line $(‘a#showhidetrigger’).hide(); on a couple of places, but it doesn’t seem to work. The target is now no longer hidden when the page is loaded. Did I missplace your code?
    This is how I’ve tried it, maybe this can help you to help me:

    $(document).ready(function () {
    $(‘#showhidetarget’).hide();

    $(‘a#showhidetrigger’).click(function () {
    $(‘#showhidetarget’).show(200);
    $(‘a#showhidetrigger’).hide();
    });
    });

    Thanks in advance,

    Thomas

  8. Simon Holman Post author

    Thomas

    It may be because an a tag is an inline element, not a block element so it can’t hide it. You’d have to check the jQuery documentation.

    Perhaps put a div around the show/hide a tag, give it an id and try to hide the div rather than the a tag.

    Simon

  9. Thomas

    Simon,
    I’ve put in front of (the section containing) the tag, and a at the end. I assume that’s all it takes to make it into a div? I haven’t typed anything else.
    Then I tried to put $(‘#hideafterclick’).hide(); can you confirm that the syntax is correct?

    So then the code reads:

    $(document).ready(function () {
    $(‘#showhidetarget’).hide();

    $(‘a#showhidetrigger’).click(function () {
    $(‘#showhidetarget’).show(200);
    $(‘#hideafterclick’).hide();

    });
    });

    It still doesn’t work, i.e. the target is still showing.
    So IF you can confirm me that my code is “as good as it gets” and doesn’t contain any syntax errors or missplacements, THEN we can decide that this simply doesn’t work. Would be a real pity, I was so close!

    Kind regards,

    Thomas

  10. Thomas

    Sorry Simon,
    a part of message seems to have been deleted, it probably contained too many dangerous tags or brackets:-)
    I wrote that I’ve put __ div id=”hideafterclick” __ in front of the section containing the tag, between brackets of course, I haven’t defined the div in any other way. And then I put the slash div at the end of that section.
    I hope it makes enough sense for you to verify if I dind’t make any mistakes!

    Thomas

  11. Mac Gyver Yoingco

    will you please help me?..
    i want to show a hidden div using jquery..
    after showing the hidden div..
    i need to hide an input type that value is “save”
    then another input type “save1” will appear thanks..

Comments are closed.