How to Check if Element is Hidden in JQuery

jQuery is a popular JavaScript library that allows web developers to easily work with different HTML elements on their site. In jQuery, a common task we face is to determine whether an element is hidden or visible. In this article, we will learn how to check if an element is visible or not. We will also learn how to display or hide or toggle element visibility.

Check if Element is Hidden in JQuery

There are several ways to check if an element is hidden or visible. Let us look at some of the common solutions. Let us say you have the following couple of buttons on your web page. Out of them, the first one is hidden and the second is visible. We have used style HTML attribute to hide our element.

<button id='button1' class='my_buttons' style='display:none'>Hello</button>
<button id='button2' class='my_buttons'>Bye</button>

1. Using :hidden selector

In this solution, we will use is() function along with :hidden selector. is() function checks the state of an HTML element in jQuery, against the state provided. If element’s state matches the input state, then it returns true, else it returns false. Here is its syntax.

$(selector).is('state')

Here is the code to check if element is hidden, using jQuery.

$(selector).is(':hidden')

Here is the jQuery code to check if each of our buttons is hidden.

$('#button1').is(':hidden'); //output is true
$('#button2').is(':hidden'); //output is false

Please note, the selector that you use for the above command must return only 1 item, else it will not work. is() function can check the state of only 1 element at a time. For example, if you use class selector ‘.my_buttons’ which selects both the buttons, it will still return true, even though there are 2 buttons with same class name and the second one is visible.

$('.my_buttons').is(':hidden'); //output is true

In this case, since your selector returns multiple elements, you need to loop through each item and check their visibility individually. Here is an example to do this.

$('.my_buttons').each(function(){
	alert($(this).is(':hidden'));
});

Please note, the is() function will check for CSS property display:none/block and ignore visibility:true/false.

2. Using :visible selector

Similarly, the :visible selector, when used with is() function, returns true if the element is visible. Else it returns false. Here is an example to check if our buttons are visible or not.

$('#button1').is(':visible'); //output is false
$('#button2').is(':visible'); //output is true

Just like in the previous case, even :visible can be used with only one element at a time. If your element selector returns multiple elements, then it will return the state of only first element.

$('.my_buttons').is(':visible'); //output is false

In such cases, you need to loop through each element returned by the selector and separately check their visibility.

$('.my_buttons').each(function(){
	alert($(this).is(':visible'));
});

Please note, both :hidden and :visible also consider the visibility of the parent before returning true/false values. If you do not want that to happen, use the next solution.

3. Using css() function

As mentioned earlier, :hidden and :visible only check for CSS property display:none/block and not visibility:true/false. If you want a more comprehensive way to check an element’s visibility then you can use css() function. It returns the value of any CSS property that you provide as function argument.

Here is its syntax.

$(selector).css(property) //returns CSS property value

Here is the code to check if an element is hidden by checking both its display as well as visibility properties. We check that the display property should be none and the visibility property should be hidden.

if ( $(selector).css('display') == 'none' || $(selector).css("visibility") == "hidden"){
    // 'element' is hidden
}

Here is the code to check if the first button is hidden or not.

if ( $('#button1').css('display') == 'none' || $('button1').css("visibility") == "hidden"){
    // 'element' is hidden
}

If you need to check the visibility of multiple elements, or if your element selector returns multiple elements, then you need to loop through these elements one by one and separately check the visibility of each element. Here is an example to check visibility of each element with class=my_buttons

$('.my_buttons').each(function(){
	if ( $(this).css('display') == 'none' || $(this).css("visibility") == "hidden"){
    // element is hidden
 }else{
    // element is visible
  }
});

Please note, the css() function does not consider the visibility of parent element, unlike is() method.

4. Using filter() function

Since is() and css() return values, you cannot chain any jQuery functions to it. However, in real world cases, people not only want to determine if an element is hidden or not but also do something with it. In such cases, you can use filter() function. It selects the elements based on the conditions and selectors you provide. It will identify hidden/visible elements on your web page and allow you to chain functions to them, for further processing.

For example, if you want to check if button1 is hidden using is() function and do something in case it is hidden, then you need to use the following code.

if($('#button1').is(':hidden')){
  //do something
}

But you can easily do this using filter() function as shown below.

$('#button1').filter(":hidden").animate({ width: "toggle" });

You can also use it with selectors that return multiple elements. Here is an example where our class selector returns all buttons with class=my_buttons.

$('.my_buttons').filter(":hidden").animate({ width: "toggle" });

So far, we have learnt how to determine if element is visible or hidden in jQuery. jQuery also provides hide(), show() and toggle() functions to hide, show or toggle elements. Irrespective of whether an element is hidden or not, you can directly show, hide or toggle its state using these functions.

How to Hide Element in jQuery

The hide() method allows you to hide one or more elements on a web page. It does so by setting its display CSS property to none. Here is its syntax.

$(selector).hide()

Here is an example to hide button with id=button2.

$('#button2').hide()

Here is an example to hide all buttons with class=my_buttons.

$('.my_buttons').hide();

You can also specify multiple selectors in a comma-separated format. Here is an example to hide buttons by specifying their IDs, instead of class name.

$('#button1, #button2').hide();

If any of the selected elements are already hidden, they will continue to remain hidden, without getting affected.

How to Show Element in jQuery

Similarly, you can use show() function to display a hidden element. It does so by setting the display CSS property to block. Here is its syntax.

$(selector).show()

Here is an example to show button with id=button1.

$('#button1').show()

Here is an example to show all buttons with class=my_buttons.

$('.my_buttons').show()

Here also you can specify different selectors in a comma-separated manner.

$('#button1, #button2').show();

How to Toggle Element in jQuery

You can also toggle the state of an HTML element, that is, from hidden to visible and vice versa using toggle() function. Here is its syntax.

$(element).toggle();

The toggle method will check if the selected element is visible and hide it. If it is hidden, then it will display the element. Here is the code to toggle the state of button1.

$('#button1').toggle();

You can also call toggle() method on multiple elements. Here is the code to toggle state of all elements with class=my_buttons.

$('.my_buttons').toggle()

In this case, it will display button1 and hide button2.

Like hide() and show(), you can specify multiple selectors in a comma-separated manner.

$('#button1, #button2').toggle();

Conclusion

In this article, we have learnt several ways to check if an element is hidden or visible using jQuery. You can easily do this using is() or css() functions. We have also learnt how to hide, show and toggle elements on your web pages. They work with almost every version of jQuery so you can use them as per your requirement. It is always a best practice to check if an element is hidden before you work with it, otherwise all the HTML changes will never be visible, since the element is hidden anyway.

Also read:

How to Access Correct This In JS Callback
How to Return Asynchronous Response in JavaScript
How to Bind Events to Dynamic JS Elements