Show/Hide HTML Elements Using jQuery

jQuery’s .show() and .hide() methods can be used to show or hide any HTML elements on a page. Usually, the methods are used as the results of a trigger event (for example, if an item is either hidden or shown based on a click event) or used with a timer function so that something hides or shows based on how long a page has been loaded for. Whatever context you choose to use .show() or .hide() methods, they’re pretty handy and easy to understand.

For an example of how you would use the methods as a result of a click event, see the code below:


The example above demonstrates how you would use a click event to trigger an element appearing on a page. After the .button class is clicked, any h1 on the page that is hidden would be shown. Using the .hide() method instead would require the exact same syntax.

The .show() and .hide() methods also take a speed parameter that allows you to define the speed at which you’d like to have the selected elements appear or disappear. You can define the speed as a number (in milliseconds) or string (slow, fast). See an example of how to use the speed parameter below:


There are also a few other parameters that the .show and .hide methods will accept, including easing effects. As with most jQuery methods, you can also place a callback function within the method’s parentheses to be executed after the show/hide event.

jQuery’s .fade() Method

In jQuery, there several different methods that can be used to make an element fade in and out of view. They are: .fadeIn(), .fadeoOut(), .fadeToggle(), and .fadeTo().

.fadeIn() and .fadeOut() are pretty self explanatory. When triggered, it is used to have items either fade in or fade out, respectively. .fadeToggle() is used to toggle between .fadeIn() and .fadeOut(), so when .fadeToggle() is triggered the first time, the elements will fade out, and when it’s triggered again, they’ll fade in. If it’s triggered a third time, the elements will fade back out. .fadeTo() is used to partially fade elements out. With .fadeTo() you can control the opacity level that the elements fade to.

Here’s an example of how you would use .fadeOut() in context:


When the code in the above example is executed, the .main element will fade out at a slow rate when it’s clicked. The two parameters that the .fadeOut() method takes are speed (could be in milliseconds or in fixed values like slow), and a callback, which gives you the option to insert another function to be executed once the fade is complete. .fadeIn() and .fadeToggle() take the same parameters.

How to Use jQuery’s .one() Method

jQuery’s .one() method is a really cool method that, when used, will trigger a function attached to a certain selector or element only once. Normally with jQuery methods, they will occur as many times as the trigger event is triggered, but when you use the .one() method, the code that it’s attached to only gets executed once per page load.

As an example, let’s say we wanted to use the .one() method to trigger an alert when a button with the class “.alert-button” is clicked, and we only want this to happen ONE time (so if the user clicks the button twice or three times, the alert will only have shown up after the first click. This is actually pretty easy to employ in your jQuery. To see how it works, check out the code below.

$(".alert-button").one("click", function(){
 alert("This alert message will only appear once!");

So once that .alert-button button is clicked, the alert will pop up. But if the button is clicked again, no alert message will appear. We’ve found this method to be extremely useful because often in our projects we do want to limit actions to occurring only once, and it’s great to have a simple and effective way to do that.

Using jQuery to Check All Boxes

If you want to include a “check all” option in any of your projects, it’s actually pretty easy to do using jQuery. The snippet below demonstrates how to include a check all button that will check all of the inputs that fall within one fieldset tag. To start, make sure your HTML looks something like this:

<input type="checkbox" class="checkall"> Check all <br>
<input type="checkbox"> Checkbox <br>
<input type="checkbox"> Checkbox <br>
<input type="checkbox"> Checkbox <br>
<input type="checkbox"> Checkbox <br>

So the first input type with the .checkall class is going to be the input that, when checked, will also check all the other boxes that are in that fieldset. The jQuery for achieving this effect is as follows:

$(function () {
$('.checkall').click(function () {
$(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);

Again, this code will only apply the check all functionality to boxes within the fieldset of the check all button. If there are other checkboxes within a different fieldset, they won’t be affected by the checking of this particular check all button (but if the code of another fieldset is exactly the same, checking that check all button will check all of the checkbox input fields in that particular fieldset). The code can be changed and customized to reflect your own classes.



jQuery’s .attr() Method

In jQuery, the attribute or .attr() method is used to set the attributes values of selected elements. It works similarly to the .css() method, except with .attr(), you're not setting or changing the style rules, but the inline HTML attributes of a particular element. Common HTML attributes that can be altered are width and height, which are often applied to image (img) tags. Check out the example below to see how the .attr() method works.

  1. <br />
  2. $(".main-img).click(function(){ $(this).attr("width","350px"); })<br />

The code above will change the width of the .main-img class to 350px when that class is clicked. The syntax for setting or changing the attribute of an HTML element is putting the attribute in quotations as the first parameter of the method, and then your desired value in quotations as the second parameter of the method, like this: .attr("attribute","value").

If you want to use the .attr() method to set more than one value, the syntax changes a bit. The syntax actually becomes more similar to a CSS style rule, like this: .attr({attribute: value, attribute: value}). Here's what it looks like in action:

  1. <br />
  2. $(".main-img).click(function(){ $(this).attr({width: 350px, height: 450px}); })<br />

jQuery Prefixes: jQuery vs. $

It's a really common practice in jQuery to use the dollar sign ($) prefix with your methods, like this:


The above code would make the div with the ID #myDiv slide up when the page loads. But that's not the only way to write that function. Sometimes you might see it written with the word jQuery in place of the $ symbol:


The two prefixes $ and jQuery are essentially interchangeable with each other because of the function that can be found in the jQuery source code:

window.jQuery = window.$ = jQuery

The function above basically defines $ as an alias for jQuery, so go ahead and use them interchangeably in jQuery.