JQuery_ Novice to Ninja - Earle Castledine [18]
$('#hideButton').click(function() {
$(this).hide(); // a curious disappearing button.
});
$(this) provides a nicer way to talk about the element that fired the event, rather than having to re-select it.
Tip: Where’s the Action?
This might be a bit confusing when you’re starting out, as the “action” component of a jQuery statement seems to have several purposes: we’ve seen it used to run animations, retrieve values and now, handle events! It’s true—it gets around! Usually the action’s name gives you a good clue to its purpose, but if you become lost, it’s best to consult the index. After a while, you’ll sort out the handlers from the animations from the utilities.
Revealing Hidden Elements
On with our task! The client has also specified that the user needs to be able to retrieve the disclaimer in case they close it by mistake. So let’s add another button to the HTML, this time with an id of showButton:
chapter_02/13_revealing/index.html (excerpt)
We’ll also add another jQuery statement to our script file, to handle showing the disclaimer when the show button is clicked:
chapter_02/13_revealing/script.js (excerpt)
$('#showButton').click(function() {
$('#disclaimer').show();
});
Toggling Elements
Having separate buttons for hiding and showing the disclaimer seems like a waste of valuable screen real estate. It would be better to have one button that performed both tasks—hiding the disclaimer when it’s visible, and showing it when it’s hidden. One way we could do this is by checking if the element is visible or not, and then showing or hiding accordingly. We’ll remove the old buttons and add this nice new one:
chapter_02/14_toggle_1/index.html (excerpt)
When it’s clicked, we check to find out if we should show or hide the disclaimer:
chapter_02/14_toggle_1/script.js (excerpt)
$('#toggleButton').click(function() {
if ($('#disclaimer').is(':visible')) {
$('#disclaimer').hide();
} else {
$('#disclaimer').show();
}
});
This introduces the is action. is takes any of the same selectors we normally pass to the jQuery function, and checks to see if they match the elements it was called on. In this case, we’re checking to see if our selected #disclaimer is also selected by the pseudo-selector :visible. It can also be used to check for other attributes: if a selection is a form or div, or is enabled.
Important: The if Statement
If you’re entirely new to programming (that is, if you’ve only ever worked with HTML and CSS), that whole block of code is probably quite confusing! Don’t worry, it’s actually quite straightforward:
if (condition) {
// this part happens if the condition is true
} else {
// this part happens if the condition is false
}
The condition can be anything that JavaScript will evaluate to true or false. This sort of structure is extremely common in any type of programming, and we’ll be using it a lot for the rest of the book. If you’re uncomfortable with it, the best way to learn is to play around: try writing different if / else blocks using jQuery’s is action like the one we wrote above. You’ll get the hang of it in no time!
is will return true or false depending on whether the elements match the selector. For our purposes we’ll show the element if it’s hidden, and hide it if it’s visible. This type of logic—where we flip between two states—is called a toggle and is a very useful construct.
Toggling elements between two states is so common that many jQuery functions have a version that allows for toggling. The toggle version of show/hide is simply called toggle, and works like this:
chapter_02/15_toggle_2/script.js (excerpt)
$('#toggleButton').click(function() {
$('#disclaimer').toggle();
});
Every time you click the button, the element toggles between visible and hidden.
It would be nice, however, if the button was labeled with a more useful word than “toggle,” which might be confusing to our users. What if you want to toggle