How To Check If An Element Is Hidden In jQuery

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.

1 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’s height and width set to 0
• If an element has a hidden parent element

Let’s now check if an element is hidden or not via a 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 the jQuery(document).ready(function(){}); function as shown in 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>

In 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 whether .article-wrapper is hidden or not? if it is hidden then it will execute the true part of the condition otherwise execute the false part.

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

2 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>

In 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.

3 Check The Element 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
9. Difference Between text() And html() in jQuery
10. How To Update Pivot Table In Laravel
11. How To Install Vue In Laravel 8 Step By Step
12. How To Handle Failed Jobs In Laravel
13. Best Ways To Define Global Variable In Laravel
14. How To Get Latest Records In Laravel
15. Laravel Twilio Send SMS Tutorial With Example
16. How To Pass Laravel URL Parameter
17. Laravel 9 Resource Controller And Route With Example
18. Laravel 9 File Upload Tutorial With Example
19. How To Schedule Tasks In Laravel With Example
20. Laravel Collection Push() And Put() With Example

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

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!