Check, using jQuery, if an element is 'display:none' or block on click
JqueryCssJquery Problem Overview
I want to check and sort elements that are hidden. Is it possible to find all elements with attribute display
and value none
?
Jquery Solutions
Solution 1 - Jquery
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";
Solution 2 - Jquery
$("element").filter(function() { return $(this).css("display") == "none" });
Solution 3 - Jquery
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
}
});
Solution 4 - Jquery
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()
Solution 5 - Jquery
Use this condition:
if (jQuery(".profile-page-cont").css('display') == 'block'){
// Condition
}
Solution 6 - Jquery
$('#selector').is(':visible');
Solution 7 - Jquery
another shortcut i personally prefer more than .is() or .length:
if($('.myclass:visible')[0]){
// is visible
}else {
// is hidden
}
Solution 8 - Jquery
<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>