How do I check if an element is hidden in jQuery?

javascript

visibility

jquery

selectors

byAnton Shumikhin·Sep 18, 2024

Check if a jQuery element is hidden or visible with a simple one-liner:

// Seeing if #element is playing hide and seek with you? Try this. 
$('#element').is(':hidden');

This will return true if #element is not visible on the page. Use it for objective-driven conditional checks based on its visibility state.

Exploring visibility in jQuery

Understanding how visibility checks work in jQuery is about digging into the properties under investigation. The :hidden and :visible selectors focus on the CSS display property, not the visibility property. Therefore:

:visible means the element occupies layout space, regardless of actual visibility (visibility could be hidden or it could be behind another element).
:hidden indicates no space is occupied in the layout (display attribute is none).

Pondering over parent-child visibility

If you're verifying visibility, remember to consider the ancestral elements. A visible child within a hidden parent is still invisible (quite the CSS paradox, isn't it?). To consider both, try this:

if ($('#childElement').is(':visible') && !$('#childElement').closest(':hidden').length) {
   // Both are visible, let's celebrate! Maybe?
}

The .css() detective

You can dig deeper into visibility mysteries with the .css() method:

if ($(element).css('visibility') === 'hidden' || $(element).css('display') === 'none') {
   // The element is indeed hiding. Case closed!
}

But beware, the .css() method lacks ancestral vision, resulting in misdiagnosis of visibility.

Visibility-based conditional logic

Now let's discuss about toggling behavior based on visibility state. For example:

$('.toggle-button').on('click', function() {
    var $details = $('#detailsSection');
    
    if ($details.is(':hidden')) {
        $details.slideDown(); // Next stop: Hogwarts!... or just...down.
    } else {
        $details.slideUp(); // Poof! Just like my motivation on Mondays.
    }
});

This .is(':hidden') usage enables a dynamic user interface, adapting to the visibility state of the element.

Actions for visible and hidden elements

Sometimes, you might need to apply actions only to elements that are visible or conversely, hidden:

// Only hidden elements get the magic fade-in
$('.element:hidden').fadeIn(); 

// Bestow a special CSS class upon the hidden
$('div:hidden').addClass('special-hidden');

Prevents wasteful operations on already visible or hidden elements, enhancing site performance.

Addressing edge cases and considerations

When using the :hidden and :visible selectors in jQuery, remember that elements with CSS set to opacity: 0 or visibility: hidden are considered :visible due to their space-occupying nature.

Distinguishing between display and visibility

To handle elements hidden via display: none and visibility: hidden, a custom selector might save your day:

$.extend($.expr[':'], {
    reallyhidden: function(el) {
        return $(el).css('visibility') === 'hidden' || $(el).css('display') === 'none';
    }
});

// Using the custom selector like a boss
$('#example:reallyhidden').doSomething();

This allows for addressing specific scenarios that could stump the standard selectors.

Adopting best practices: Transparency in coding

When deploying visibility checks in your code, you should always:

Stick to .is(':hidden') or .is(':visible') for readability and maintainability.
Use :visible and :hidden as a filter within your jQuery selectors.
Remember the invisibility caveat with opacity and visibility CSS property.
Try custom selectors or .each() loops when default selectors don't cut it.

Enhancing user experience

The real advantage of visibility checks extends beyond just technical accuracy - it's also about enhancing the user experience. Use visibility to load content dynamically:

$(window).on('scroll', function() {
    $('.post:visible').each(function() {
        // Content load in progress. Please wait...
    });
});

Or ensure input focus in forms makes sense:

$('.next-button').on('click', function() {
    $('.form-section:hidden').first().slideDown(function() {
        $(this).find('input').first().focus(); // Here you go first input, all eyes on you!
    });
});