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

Toytown_Mafia_21709 0
Viewed 3046636

How do I toggle the visibility of an element using .hide(), .show(), or .toggle()?

How do I test if an element is visible or hidden?

visibility dom jquery javascript
65 Answers

Since the question refers to a single element, this code might be more suitable:

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

It is the same as twernt's suggestion, but applied to a single element; and it matches the algorithm recommended in the jQuery FAQ.

We use jQuery's is() to check the selected element with another element, selector or any jQuery object. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match, otherwise return false.

Tsvetomir_Tsonev_254490

You can use the hidden selector:

// Matches all elements that are hidden
$('element:hidden')

And the visible selector:

// Matches all elements that are visible
$('element:visible')
twernt_188460 
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // 'element' is hidden
}

The above method does not consider the visibility of the parent. To consider the parent as well, you should use .is(":hidden") or .is(":visible").

For example,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

The above method will consider div2 visible while :visible not. But the above might be useful in many cases, especially when you need to find if there is any error divs visible in the hidden parent because in such conditions :visible will not work.

Mote_247890

From How do I determine the state of a toggled element?

You can determine whether an element is collapsed or not by using the :visible and :hidden selectors.

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

If you're simply acting on an element based on its visibility, you can just include :visible or :hidden in the selector expression. For example:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
user_5748890

Often when checking if something is visible or not, you are going to go right ahead immediately and do something else with it. jQuery chaining makes this easy.

So if you have a selector and you want to perform some action on it only if is visible or hidden, you can use filter(":visible") or filter(":hidden") followed by chaining it with the action you want to take.

So instead of an if statement, like this:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

Or more efficient, but even uglier:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

You can do it all in one line:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });
Simon_169400

Also here's a ternary conditional expression to check the state of the element and then to toggle it:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
user_26685680 
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
user_23573910

1 • jQuery solution

Methods to determine if an element is visible in jQuery

<script>
if ($("#myelement").is(":visible")){alert ("#myelement is visible");}
if ($("#myelement").is(":hidden")){alert ("#myelement is hidden"); }
</script>

Loop on all visible div children of the element of id 'myelement':

$("#myelement div:visible").each( function() {
 //Do something
});

Peeked at source of jQuery

This is how jQuery implements this feature:

jQuery.expr.filters.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

2 • How to check if an element is off-screen - CSS

Using Element.getBoundingClientRect() you can easily detect whether or not your element is within the boundaries of your viewport (i.e. onscreen or offscreen):

jQuery.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
  return (
           (rect.x + rect.width) < 0 
             || (rect.y + rect.height) < 0
             || (rect.x > window.innerWidth || rect.y > window.innerHeight)
         );
};

You could then use that in several ways:

// Returns all elements that are offscreen
$(':offscreen');

// Boolean returned if element is offscreen
$('div').is(':offscreen');

If you use Angular, check: Don’t use hidden attribute with Angular

user_93178300

Using hidden selection you can match all hidden elements

$('element:hidden')

Using Visible selection you can match all visible elements

$('element:visible')
user_74848530

A jQuery solution, but it is still a bit better for those who want to change the button text as well:

$(function(){
  $("#showHide").click(function(){
    var btn = $(this);
    $("#content").toggle(function () {
      btn.text($(this).css("display") === 'none' ? "Show" : "Hide");
    });
   });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="showHide">Hide</button>
<div id="content">
  <h2>Some content</h2>
  <p>
  What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </p>
</div>

user_19662470

Extended function for checking if element is visible, display none, or even the opacity level

It returns false if the element is not visible.

function checkVisible(e) {
    if (!(e instanceof Element)) throw Error('not an Element');
    const elementStyle = getComputedStyle(e);
    if (elementStyle.display === 'none' || elementStyle.visibility !== 'visible' || elementStyle.opacity < 0.1) return false;
    if (e.offsetWidth + e.offsetHeight + e.getBoundingClientRect().height +
        e.getBoundingClientRect().width === 0) {
        return false;
    }
    const elemCenter   = {
        x: e.getBoundingClientRect().left + e.offsetWidth / 2,
        y: e.getBoundingClientRect().top + e.offsetHeight / 2
    };
    if (elemCenter.x < 0 || elemCenter.y < 0) return false;
    if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
    if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
    let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);
    do {
        if (pointContainer === e) return true;
    } while (pointContainer = pointContainer.parentNode);
    return false;
}
user_38508050

There are two ways to check visibility of element.

Solution #1

if($('.selector').is(':visible')){
    // element is visible
}else{
    // element is hidden
}

Solution #2

if($('.selector:visible')){
    // element is visible
}else{
    // element is hidden
}
user_141864570

If you want to check if an element is visible on the page, depending on the visibility of its parent, you can check if width and height of the element are both equal to 0.

jQuery

$element.width() === 0 && $element.height() === 0

Vanilla

element.clientWidth === 0 && element.clientHeight === 0

Or

element.offsetWidth === 0 && element.offsetHeight === 0

user_36549430

Use any of visible Selector or hidden Selector to check visiblity:

  1. Use :visible Selector - jQuery( ":visible" )
  2. Use :hidden Selector - jQuery( ":hidden" )

use .toggle() - Display and hide element

function checkVisibility() {
    // check if element is hidden or not and return true false
    console.log($('#element').is(':hidden'));

    // check if element is visible or not and return true false
    console.log($('#element').is(':visible'));

    if ( $('#element').css('display') == 'none' || $('#element').css("visibility") == "hidden"){
        console.log('element is hidden');
    } else {
        console.log('element is visibile');
    }
}

checkVisibility()
$('#toggle').click(function() {
    $('#element').toggle()
    checkVisibility()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='toggle'>Toggle</button>
<div style='display:none' id='element'>
    <h1>Hello</h1>
    <p>it's visible</p>
</div>

user_142296900

You can use a CSS class when it visible or hidden by toggling the class:

.show{ display :block; }

Set your jQuery toggleClass() or addClass() or removeClass();.

As an example,

jQuery('#myID').toggleClass('show')

The above code will add show css class when the element don't have show and will remove when it has show class.

And when you are checking if it visible or not, You can follow this jQuery code,

jQuery('#myID').hasClass('show');

Above code will return a boolean (true) when #myID element has our class (show) and false when it don't have the (show) class.

user_39943040

You can use jQuery's is() function to check the selected element visible or hidden. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match otherwise returns false.

<script>
    ($("#myelement").is(":visible"))? alert("#myelement is visible") : alert("#myelement is hidden");
</script>
user_35902370 
content.style.display != 'none'


function toggle() {
  $(content).toggle();
  let visible= content.style.display != 'none'
  console.log('visible:', visible);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="toggle()">Show/hide</button>
<div id="content">ABC</div>

user_8600990

The easiest answer to this question is this:

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}
user_167119800

Instead of writing an event for every single element, do this:

$('div').each(function(){
  if($(this).css('display') === 'none'){
    $(this).css({'display':'block'});
  }
});

Also you can use it on the inputs:

$('input').each(function(){
  if($(this).attr('type') === 'hidden'){
    $(this).attr('type', 'text');
  }
});
Admin1

The below code checks if an element is hidden in jQuery or visible

// You can also do this...

        $("button").click(function(){
            // show hide paragraph on button click
            $("p").toggle("slow", function(){
                // check paragraph once toggle effect is completed
                if($("p").is(":visible")){
                    alert("The paragraph  is visible.");
                } else{
                    alert("The paragraph  is hidden.");
                }
            });
        });
user_124892790 
   hideShow(){
  $("#accordionZiarat").hide();
  // Checks CSS content for display:[none|block], ignores visibility:[true|false]
  if ($("#accordionZiarat").is(":visible")) {
    $("#accordionZiarat").hide();
  }

  
  else if ($("#accordionZiarat").is(":hidden")) {
    $("#accordionZiarat").show();
  }

  else{

  }
user_101168120 
if($(element).is(":visible")) {
  console.log('element is visible');
} else {
  console.log('element is not visible');
}
user_10013420

You can try this

$(document).ready(function() {
   var view = $(this).is(':visible');

   if(view) {
      alert("view");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});
Admin1

if you hide with class - d-none

if (!$('#ele').hasClass('d-none')) {
        $('#ele').addClass('d-none'); //hide 

    }
user_44935600
Related