312

I want to check and sort elements that are hidden. Is it possible to find all elements with attribute display and value none?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Nicholas Francis
  • 3,623
  • 2
  • 19
  • 22

8 Answers8

673

You can use :visible for visible elements and :hidden to find out hidden elements. This hidden elements have display attribute set to none.

hiddenElements = $(':hidden');
visibleElements = $(':visible');

To check particular element.

if($('#yourID:visible').length == 0)
{

}

Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero, Reference

You can also use is() with :visible

if(!$('#yourID').is(':visible'))
{

}

If you want to check value of display then you can use css()

if($('#yourID').css('display') == 'none')
{

}

If you are using display the following values display can have.

display: none

display: inline

display: block

display: list-item

display: inline-block

Check complete list of possible display values here.

To check the display property with JavaScript

var isVisible = document.getElementById("yourID").style.display == "block";
var isHidden = document.getElementById("yourID").style.display == "none";
Adil
  • 146,340
  • 25
  • 209
  • 204
68
$("element").filter(function() { return $(this).css("display") == "none" });
Deepanshu Goyal
  • 2,738
  • 3
  • 34
  • 61
  • 13
    +1: This is actually more useful than the accepted answer *for the question asked*, as this will work even if a parent element has `style="display: none;"`. Answers using `:visible` and `:hidden` will fail if you want specific element visibility and a parent element is hidden as those selectors return overall visibility on the page (which was not the question asked). – iCollect.it Ltd May 02 '14 at 09:41
  • This works when running unite test in JS DOM environment. – b01 Feb 18 '16 at 00:20
  • For a tabbing plugin, it was setting `visibility: 'hidden';` in css, so the check ended up also checking: `$(this).css('visibility') != 'hidden'` – phyatt Mar 05 '18 at 21:20
  • In my case this is more useful, since I have 2 error messages and one of those have `display = none` and the other `display = block`, but the page have other tabs, that causes these both messages be not visible, when I am in the other tabs,... but 1 message is visible and this selector will help me with that. – Jaider Dec 17 '20 at 02:33
32

Yes, you can use the cssfunction. The below will search all divs, but you can modify it for whatever elements you need

$('div').each(function(){

    if ( $(this).css('display') == 'none')
    {
       //do something
    }
});
dreamwagon
  • 1,219
  • 1
  • 15
  • 17
22

There are two methods in jQuery to check for visibility:

$("#selector").is(":visible")

and 

$("#selector").is(":hidden")

You can also execute commands based on visibility in the selector;

$("#selector:visible").hide()

or 

$("#selector:hidden").show()
Luceos
  • 6,629
  • 1
  • 35
  • 65
  • 7
    Note: this will *not* return the specific visible attribute of the selected elements, as the question asks, as `:visible` also depends on parent ancestor visibility. If an ancestor is `display: none` all descendants will not be visible regardless of `display` state. – iCollect.it Ltd May 02 '14 at 09:45
13

Use this condition:

if (jQuery(".profile-page-cont").css('display') == 'block'){
    // Condition 
}
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Rana
  • 324
  • 2
  • 8
11
$('#selector').is(':visible');
Barry Chapman
  • 6,690
  • 3
  • 36
  • 64
  • 3
    Note: this will *not* return the specific visible attribute of the selected elements, as the question asks, as `:visible` also depends on parent ancestor visibility. If an ancestor is `display: none` all descendants will not be visible regardless of `display` state. – iCollect.it Ltd May 02 '14 at 09:45
1

Just another shortcut i personally prefer more than .is() or .length:

if($('.myclass:visible')[0]){
   // is visible
}

which will just return undefined if no dom-element found for selector .myclass:visible

john Smith
  • 17,409
  • 11
  • 76
  • 117
1

Live demo

<div id="div" style="display: none"></div>
<button class="try">Try now</button>

<script type="text/javascript">
$(document).on('click','.try',function() {
var style = $('#div');
if (style.css("display") == "none") {
  alert("display not available");
}
});
</script>
Dexter
  • 74
  • 8