Home » How To Check If An Element Is Hidden In jQuery

How To Check If An Element Is Hidden In jQuery

Last updated on December 24, 2020 by

Table of Contents
1. Use :hidden selector & .is() method in jQuery
2. Show All Hidden Elements in jQuery
3. Check The Elements Which is Hidden by visibility: hidden

Check if an element is hidden in jQuery is one of the most searched questions. To do this, you can use :hidden or :visible jQuery selector with .is() jQuery function. But before that, we should know what actually :hidden do. So let’s first understand the :hidden selector

Use :hidden selector & .is() method in jQuery

The :hidden jQuery selector can be used to check whether an element is hidden or not on a page.

The :hidden jQuery selector can be useful when an element is hidden in the following situations

  • If an element is set to display:none
  • Form elements with type="hidden"
  • If an element height and width set to 0
  • If an element has hidden parent element

Let’s now check if an element is hidden or not via very simple example.

Please note that :hidden will not work when elements are hidden with visibility:hidden

We recommend you to put your code inside jQuery(document).ready(function(){}); function as shown into the example otherwise it will return unexpected results.

Check If An Element is Hidden or Not
<!-- Check hidden or not by using CLASS(.) selector -->
<div class="article-wrapper" style="display:none;"></div>

<!-- Check hidden or not by using ID(#) selector -->
<div id="wall-wrapper" style="display:none;"></div>
<script type="text/javascript">

/*
 * @ Check if an element is hidden or not in jQuery
 */ 
 jQuery(document).ready(function() {
	
	 /* Check hidden or not by using CLASS(.) selector */
	 if (jQuery('.article-wrapper').is(':hidden')) {
		alert('Yes, Element is Hidden');
	 } else {
		alert('No, Element is not Hidden');
	 }
	 
	 /* Check hidden or not by using ID(#) selector */
	 if (jQuery('#wall-wrapper').is(':hidden')) {
		alert('Yes, Element is Hidden');
	 } else {
		alert('No, Element is not Hidden');
	 }
 });
</script>

On the above example, we have used .is() jQuery function which is used to return true or false based on condition match. So the above “if condition” will check that .article-wrapper is hidden or not? if it is hidden then it will execute the true part of the condition otherwise execute false part.

Don’t forget to change the CLASS or ID selector as per your requirement.

Show All Hidden Elements in jQuery

To do this, you just need to use $('selector:hidden') or jQuery('selector:hidden'). Let’s see a basic example.

<div class="article-wrapper" style="display:none;">Hello, I am Hidden</div>

<div class="article-wrapper" style="display:none;">Hello, I am Hidden too</div>
<script type="text/javascript">
    jQuery(document).ready(function() {	
        jQuery('.article-wrapper:hidden').show();
    }); 
</script>

On the above example, jQuery('.article-wrapper:hidden') is used which will traverse the page and find out all the hidden elements of .article-wrapper class and then we have used show() jQuery function which is used to display the hidden or selected elements.

Check The Elements Which is Hidden by visibility: hidden

<div class="section-wrapper" style="visibility:hidden;">Hello, I am a Section</div>
<script type="text/javascript">
    jQuery(document).ready(function($) {
		if ( $('.section-wrapper').css("visibility") == "hidden" ) { 
			alert('yes, It\'s hidden');
		} else {
			alert('no, It\'s not hidden');
		}
    }); 
</script>

On the above example, we just checked the CSS property “visibility” is set to hidden or not.

That’s it for now. We hope this article helped you to check If an element is hidden or not in jQuery

Additionally, read our guide:

  1. jQuery Form Submit With Examples
  2. Check If Array Is Empty Or Undefined In JavaScript
  3. How To Detect IE Browser In JavaScript
  4. Simple Date formatting In JavaScript
  5. AJAX PHP Post Request With Example
  6. Difference Between == vs === in JavaScript
  7. How To Remove A Specific Item From An Array In JavaScript
  8. How To Check Array Contains A Value In JavaScript

Please let us know in the comments if everything worked as expected, your issues, or any questions. If you think this article saved your time & money, please do comment, share, like & subscribe. Thank you in advance 🙂. Keep Smiling! Happy Coding!

 
 

Leave a Comment

*

code