Basic Show and Hide
read 41 commentsAs promised in my last entry, I'll be showing you a simple effect that you can do using jQuery: showing or hiding something, or a group of things, on the page. The two functions that let us do this are, not surprisingly, show() and hide().
jQuery also comes with another function called toggle(), which will make matching elements visible if they are hidden or hidden if they are visible.
So, let's get down to business. We're going to start with our $(document).ready() function.
Next, we'll choose what we want to show or hide. Hmm, let's see. How about the site's title? Excellent! Now, whenever we refer to an element in jQuery, we start with the dollar sign, $, and we put any CSS or XPATH selector in parentheses right after it:
$('css-selector')
Since the site's title is wrapped in an <h1> tag, we'll refer to it this way: $('h1'). We could just as easily refer to all DIVs with a class of "treacle" — $('div.treacle') — or any paragraph that is a chlid of a DIV with an ID of "bonespur" — $('#bonespur > p').
Now for the magic. To make the site's title disappear, we just connect $('h1') and hide() with a dot (.) and stick it all inside the $(document).ready() like so:
The code above will make the site's title hide when the DOM / page loads, which isn't ideal for our purposes here, so I'm going to attach the the hide() event to the first button below instead. The second and third buttons will handle show() and toggle() respectively.
How did I attach the hiding and showing to those buttons? I'll show you that in my next entry.
Well, Karl, this level of geekdom is awesome but way beyond my comprehension! Very esoteric! Good for youse guys!
is there a zip file contain of these code ?
Thanks for this helpful intro Karl, I downloaded jquery today ... I'v been struggling with some of the documentation.
thanks, these tutorials have been really helpful to me. i have a little question, perhaps it's already covered somewhere else, but i was wondering if it's still necessary to put return false in mouseover and click events like is often required in javascript? or does the library take care of this automatically?
You only need to use
return falseif you are binding anonclickhandler to an element that has a default behavior. For example, links (<a href="something"></a>) have a default behavior, so you would putreturn false;inside the.click()method, after the code that says what you really want the click to do. However, if you're attaching.click()to an<h3>, there is no need toreturn false. Let me know if you'd like me to clarify any of this.Excellent posts. I've been having a bit of a hard time trying to figure out how to implement a bunch of this stuff but your posts have really made it easy to begin to wrap my mind around concepts and practices.
In the last example, I think you meant to type "class="showhide".
Yep, you're right, Luke. Good catch! And thanks for reporting it. I've fixed the typo.
very nice indeed
Hey,
Shouldn't the title of your page disappear when the page loads? It only actually seems to be tied to the buttons - and not document ready as the example suggests.
Also, I'm having a problem with this kind of thing in Firefox - I want an element to be hidden by default - so I put .hide in a document.ready function. Then I show the element with a button - but firefox seems to raise a 'page ready' event again, causing the element to be hidden almost as soon as it's displayed.
Any ideas?
Hi Dave,
No, the title shouldn't disappear when the page loads.
So, in other words, I did something like this:
I'll need to see your code before I can help you with the problem you're describing. Can you send me a link to a web page somewhere?
Great .. direct and simple.. thanks
How can I test the current show/hide status so that I can change the value of the toggle button to display "show" or "hide" as appropriate?
You should definitely take a look at some of the other tutorials on this site.
You could use .toggle() or .slideToggle(). You could also use ":visible" or ":hidden" in a conditional statement, like so:
There are many ways you could do this, and many of them are explained on this site.
Thanks for that Karl. Spot on!
I'm early in my jQuery journey so I haven't had a chance to read all your fine tutorial just yet, but I will!
I've found the same issue that Dave posted. Using the toggle function in jquery 1.2.3 has a bug with Firefox (2.0.0.12). Perhaps it's a bug. Toggel seems to function in IE and safari fine, but Firefox closes the element immediately upon showing it.
I initially thought it may be the easing plug in causing the bug, but after removing all easing code it still exists.
My code:
$("#infostuff").hide();
$("#info a").toggle(
function () { $("#infostuff").animate({ height: "show" }, 700, "easeInQuad"); return false; },
function () { $("#infostuff").animate({ height: "hide" }, 700, "easeOutQuad"); return false; }
);
I've temporarily gotten around the issue by eliminating the toggle completely and just adding a click function with a secondary link to close the content, but I'd really like a toggle.
Any help at all is greatly appreciated. I'm a designer far more than a programmer.
I've found the same issue that Dave posted. Using the toggle function in jquery 1.2.3 has a bug with Firefox (2.0.0.12). Perhaps it's a bug. Toggel seems to function in IE and safari fine, but Firefox closes the element immediately upon showing it.
I initially thought it may be the easing plug in causing the bug, but after removing all easing code it still exists.
My code:
I've temporarily gotten around the issue by eliminating the toggle completely and just adding a click function with a secondary link to close the content, but I'd really like a toggle.
Any help at all is greatly appreciated. I'm a designer far more than a programmer.
Hi Scott,
Unfortunately, bug tracking and fixing is beyond the scope of this blog. I think your best bet for a solution to this problem would be to contact the jquery-dev mailing list. If you could provide a simple test-case URL for them, that would be very helpful.
In the meantime, you could use a simple .click() and test for the visibility of $('#infostuff'), like so:
Hope that helps.
Thanks Karl. Unfortunately, the click function and test for visibility results in the same behavior. As Dave posted, it seems that Firefox immediately processes the document ready statement a second time, triggering the hide() statement again and closing the content immediately upon expanding it. I believe I could get around it by adding display none; to the css file. However, with javascript disabled there's no way to see that content. So I'd prefer the hide statement in the js rather than CSS.
I've solved the issue by having two links, one to open, one to hide in Firefox. Not the most elegant solution, but it works as expected. Luckily It's a php driven site so I can filter for each browser easily with separate includes.
I'll look into the bug tracking mailing list, thanks for the link.
Hi Scott,
I must be missing something. I put up a simple test page using the code you printed above, and it works fine for me on Firefox 2.0.0.12 Mac. Please check out the page and let me know if I'm missing the point.
Thanks Karl.
I tried to build a test page to show it as well. This lead me to discover it's a conflict somewhere, not a bug. I haven't been able to track where specifically the conflict exists yet. I'm running jcarousel and shadowbox as well. I'm thinking shadowbox is causing conflicts with jquery in Firefox. I'll be certain to post back when I narrow down the specific conflict.
Hi,
I really like the script. I am working on a long government document and I want to be able to show and hide certain blocks of text.
Here's the problem that I have. Should someone want to print out the entire document (even the hidden parts), it seems that it cannot be done if this script is being used to show and hide stuff. If I display all the hidden parts, then it works. But what if there are 50 hidden blocks of text? This would mean I would have to display all 50 blocks before printing which the end user might not know they would have to do.
Is there anyway to write some JS that will turn this show/hide feature off whenever the page is printed.
Thanks,
Rob
Hi Rob,
One option might be to include a print stylesheet that explicitly sets the display property of all those elements to block. you might need to use !important as well. Haven't tried it, but hopefully that leads you in the right direction.
ok, im looking for learn jQuey, this example i thinks is nice, but....dont said nothing about call the js form the buttons....
im loss
thanks
Nice one! I am new to jQuery and finding it very frustrating to get my head round - up to now I've only been involved in CSS web design.
Thanks for this, Karl. I really appreciate the work you do. I have a question on the test page that you set up for Scott. I want to do something similar with a sprite-based navigation, but need the toggle to be on the hover event, not the click. How would I do that?
Oh, and another question: how would I make reverse the direction of the animation? Thank you! I think I am going to buy your book. . .
Hi,
I really like the script. I am working on a long government document and I want to be able to show and hide certain blocks of text.
Here's the problem that I have. Should someone want to print out the entire document (even the hidden parts), it seems that it cannot be done if this script is being used to show and hide stuff. If I display all the hidden parts, then it works. But what if there are 50 hidden blocks of text? This would mean I would have to display all 50 blocks before printing which the end user might not know they would have to do.
Is there anyway to write some JS that will turn this show/hide feature off whenever the page is printed.
Thanks,
Rob
Rob, try the css media print ....
How to hide editor/textarea with jquery? thx
nice example thanks
Hi nice article, I have one very easy and short which will work on a button click here is the code
$(document).ready(function(){ // This Function check for ready position
$("button").click(function () { //When you press the button if div is visible it will hide it.
$("div:visible").hide("slow");
}
);
$("button").click(function () { //And if div is hidden it will show it
$("div:hidden").show("slow");
}
);
}
);
In above example your contents will not be shown when ready. To show contains use following line after ready function
$("div:hidden").show("slow");
Have some style for div
div { width:auto; height:auto; margin:5px; border:3px outset green; float:left; }
Now Create the Button:
Show hide div
And at the last use div:
This is the Test layer for show or hide your page.
can get download at http://www.jagadishwor.com.np
Can you please explain how to do it coz im new to this, I want to show and hide some contents on my web page so please tell me from the begging coz I can't understand $(document).ready() function.
Thank you.
Nimantha
I just updated the post, "Introducing $(document).ready()" with more information. Let me know if that doesn't answers your question.
Hii..can any one tel me how we can use this in wordpress just like what s done here
Thanks for the great code. I have a follow-up Q:
on your acronyms, you have a different style (dashed lines instead of solid). Can you share the details of how you did this? Thanks!
Hi Mark,
You just need to set the border-bottom property for the acronym. Something like this:
acronym, abbrev { border-bottom: 1px dotted #d44314; }How you show hide on mouseover using jquery, every example is on click. I would like to know how to show log in control on mouseover hyperlink Please login.
thank oyu
Thank you man..
That was very helpful!!!
Hi.
Since a last few month i try to learn jquery very fastly in short time but not so possible but after visiting this page , now i can work better on jquery , thanks a lot dear
I am having trouble with hiding in created elements. I click on a title, and it loads a page inside a div. The contetn that was loaded has some css that SHOULD be hidden by default, but is not (content loaded is a form, and things that are hidden are errors messages).
I ran into similar situation where I needed to use LiveQuery but am at a loss as to why this isn't working. I have been able to find nothing about it.
This sounds like an issue I discuss in this article. Also, this issue is addressed in the Frequently Asked Questions page.