JQuery Toggle Hide and Show Link

Posted at March 26

Even if you’re new to JQuery it’s always mind-boggling how easy it is to do pretty cool UX stuff with it.

Here’s you you make a link that shows and hides content on you page:

$("#toggle_link").toggle(
function() {
$(".extra_info_text").show("fast");
$("#toggle_link").text("Hide Extra Info");
},
function() {
$(".extra_info_text").hide("fast");
$("#toggle_link").text("Show Extra Info");
}
);

Give you link the id of "toggle_link" and the text you want to hide the class of "extra_info_text." Pretty darn easy.

Uncategorized

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

2 Responses to “JQuery Toggle Hide and Show Link”
  • Dickson Kunz says:
    August 3, 2010 at 11:06 am

    Is this any better than using JAVASCRIPT to accomplish virtually the same thing?

    Will JQuery allow you to do that cool layer thing where a *black veil* covers the rest of the page? (sorta like the “view video” option that appears on the CushyCMS homepage - which DOES use javascript to pull off that effect)

    Just wondering…

  • maxkpage says:
    August 3, 2010 at 11:10 am

    JQuery is a Javascript library. So JQuery is Javascript. I would Google “JQuery” because it is the best Javascript library out there and very easy to use.

    The cool layer thing with the black veil is called a lightbox. You can use them instead of pop-ups. I would use this jquery hide and show to reveal small amount of details or a hidden form.

    For example, I use it on the comment form on this page. Just click and click again on the “+Add Comment” Link above the comments on the right:

    http://scorebookz.com/fha/events/160-vs-Great-Balls-of-Friar

    So you would not really want to pop that little form in a lightbox, but it is elegantly hidden and shown when needed.

Leave Comment

(required)

(required)