jQuery: Check Visibility and Toggle with .hide()/.show()

Use jQuery’s built‑in visibility selectors and properties to test state (for example, $(el).is(':visible') / $(el).is(':hidden')) and use .hide(), .show() or .toggle() to change visibility. The .hide() / .show() pair caches and restores an element’s original display value and all three methods accept optional animation arguments; for CSS cases like visibility:hidden or opacity:0 check computed styles (e.g., window.getComputedStyle(el)) or opacity/visibility directly.

Contents

• jQuery hide(), show(), toggle() — quick overview
• How jQuery determines “visible” vs “hidden”
• Testing visibility in jQuery (practical checks)
• jQuery toggle — animation, class toggles and helpers
• Examples: common patterns and snippets
• Best practices & caveats
• Sources
• Conclusion

jQuery hide(), show(), toggle() — quick overview

Quick summary: .hide() sets an element’s CSS display to none (and caches the original display value), .show() restores the cached value, and .toggle() switches between the two. All three accept optional animation parameters (duration, easing, callback) so you can call them instantly or animate the transition. See the jQuery API notes for details on behaviors and animation semantics: .hide() (sets display:none and caches the original), .show() (restores), and .toggle() (switches state) — see the official docs for each: https://api.jquery.com/hide/, https://api.jquery.com/show/, https://api.jquery.com/toggle/.

Code examples:

// immediate
$('#panel').hide(); // -> display:none
$('#panel').show(); // -> restore original display
$('#panel').toggle(); // -> hide if shown, show if hidden

// animated
$('#panel').hide(200); // duration in ms
$('#panel').show(200, 'swing', () => {}); // easing + callback
$('#panel').toggle(300);

Note: when you call the animated forms, jQuery animates width/height/opacity to zero and then applies display:none (so .is(':visible') may return true until the animation finishes).

How jQuery determines visibility

jQuery’s :visible and :hidden selectors are not purely visual (what a user perceives); they’re layout-based. In short, an element is considered visible if it consumes space in the document (has non‑zero width or height). The official :visible docs explain this: visible elements have a width or height greater than zero, and elements not in a document are treated as hidden. See https://api.jquery.com/visible-selector/ and https://api.jquery.com/hidden-selector/ for the exact rules.

Important implications:

• display:none → element is hidden (always).
• A form input with type="hidden" → hidden.
• Width or height explicitly set to 0 → hidden by jQuery’s test.
• If an ancestor has display:none, descendants are treated as hidden.
• CSS visibility:hidden or opacity:0 usually do not make an element “hidden” to :visible if the element still occupies layout space (i.e., width/height > 0). In other words, an element can be considered :visible even if it’s fully transparent or invisible by visibility:hidden. If you need to test those cases, inspect visibility/opacity directly via computed styles.

Testing visibility in jQuery (practical checks)

Which method to use depends on what you need to know.

Primary, general-purpose checks:

• $(el).is(':visible') — true when element consumes space (recommended for most cases). See https://api.jquery.com/visible-selector/.
• $(el).is(':hidden') — the complement of :visible (see https://api.jquery.com/hidden-selector/).

Property-based checks (more specific):

• $(el).css('display') === 'none' — tests the element’s own computed display. Useful when you want to know if this element itself has display:none. Keep in mind this reads that element’s computed property; it won’t tell you about ancestor display:none in a reliable, semantic way.
• $(el).css('visibility') === 'hidden' or parseFloat($(el).css('opacity')) === 0 — use these when you care about visibility or opacity.
• $(el).prop('hidden') or $(el).attr('hidden') — checks the HTML5 hidden attribute on the element (different from CSS display). The .prop() form is preferred for boolean attributes.

DOM-level approaches (when you need a rendering-based test):

• el.getClientRects().length — returns 0 when the element doesn’t occupy any layout boxes (e.g., display:none), reliable for many rendering checks.
• el.offsetWidth / el.offsetHeight — zero when element doesn’t occupy space.

Examples:

// preferred quick test
if ($('#box').is(':visible')) { /* visible */ }

// check for display:none specifically
if ($('#box').css('display') === 'none') { /* display none */ }

// check HTML5 hidden attribute
if ($('#box').prop('hidden')) { /* has hidden attr */ }

// check computed visibility/opacity
const s = window.getComputedStyle($('#box')[0]);
if (s.visibility === 'hidden' || parseFloat(s.opacity) === 0) {
 // not perceivable even if :visible
}

For common patterns and community discussion see the StackOverflow thread and practical writeups: https://stackoverflow.com/questions/178325/how-do-i-check-if-an-element-is-hidden-in-jquery and https://www.pietschsoft.com/post/2023/09/21/how-do-i-check-if-element-is-hidden-in-jquery.

jQuery toggle — animation, class toggles and helpers

.toggle() does the flip for you, but you’ve got choices:

• Use .toggle() / .toggle(duration[, easing][, callback]) when you want jQuery to decide show vs hide and optionally animate. See https://api.jquery.com/toggle/.
• Use .toggleClass('hidden') when you prefer CSS-controlled visibility (recommended for separation of concerns, performance and CSS transitions). Example CSS: .hidden { display: none; } then $('#box').toggleClass('hidden').
• Consider accessibility: when toggling, update aria-hidden or the hidden attribute if appropriate:

$('#box').toggleClass('hidden')
 .attr('aria-hidden', $('#box').hasClass('hidden'));

Helpers: jQuery offers fadeIn/fadeOut/fadeToggle and slideUp/slideDown/slideToggle for common animated effects. If you want pure CSS transitions (smoother and often faster), toggle a class and let CSS handle the animation.

Examples: common patterns and snippets

Toggle on click:

$('.btn-toggle').on('click', function(){
 $('#menu').toggle(); // immediate
 // or animated
 // $('#menu').toggle(200);
});

Show if hidden, otherwise hide:

if ($('#panel').is(':hidden')) {
 $('#panel').show(200);
} else {
 $('#panel').hide(200);
}

Check if user can actually see the element (not just layout presence):

const el = $('#item')[0];
const style = window.getComputedStyle(el);
const isPerceivable = (style.visibility !== 'hidden' && parseFloat(style.opacity) > 0);

Use getClientRects() for a rendering test:

if ($('#item').length && $('#item')[0].getClientRects().length) {
 // element occupies layout and would be considered :visible
}

If you need to support many toggles on a page, prefer class toggling and CSS transitions — fewer reflows, easier to manage.

Best practices & caveats

• For general visibility checks use $(el).is(':visible') — it covers most real-world cases.
• If you need to know whether an element is visually perceivable (opacity/visibility/off‑screen), check computed styles or use IntersectionObserver (for viewport visibility).
• Prefer .prop('hidden') when you’re reading/writing the HTML5 hidden attribute.
• Use .toggleClass() + CSS transitions for performance and separation of concerns; use jQuery animations only when you must.
• Remember animations: .hide(duration) runs an animation and only applies display:none when it finishes — :visible may be true during the animation.
• Don’t overuse :visible (or complex selectors) on very large node sets in tight loops — cache your jQuery objects (const $el = $('#id')) to improve performance.
• Elements not attached to the document are considered hidden by jQuery — you can’t reliably predict visibility for detached nodes without inserting them into the DOM.

For a practical walkthrough and examples, SitePoint has a clear comparison of :visible / :hidden behavior: https://www.sitepoint.com/jquery-check-element-visiblehidden/.

Sources

• How do I check if an element is hidden in jQuery? (StackOverflow)
• jQuery Check if Element is Visible/Hidden — SitePoint
• How to Check an Element is Visible or not Using jQuery — TutorialRepublic
• :visible Selector | jQuery API Documentation
• jQuery: How do I check if element is hidden? | Chris Pietschmann
• :hidden Selector | jQuery API Documentation
• .hide() | jQuery API Documentation
• .show() | jQuery API Documentation
• .toggle() | jQuery API Documentation

Conclusion

To check visibility in jQuery use $(el).is(':visible') / $(el).is(':hidden') for layout-based visibility, or test specific properties with .css('display'), .css('visibility'), .prop('hidden'), or window.getComputedStyle when you need finer control. Use jQuery hide, jQuery show and jQuery toggle to change state — they support immediate and animated calls and .show() restores the element’s original display. For predictable, maintainable UI behavior prefer class-based toggles (.toggleClass()) and CSS-driven transitions, and only fall back to jQuery animation methods when needed.