I've got a situation where a div is being hidden even though I just executed code that shows all other divs with the same suffix: $("[id$='-input-container']").show()

Regardless of this, one particular div remains hidden: $("#single-colorRange-color-input-container"). I thought maybe it was being hidden somewhere later in the code but no -- immediately after calling $inputContainers.show() I have added logging as follows (and the debugger statement stops all subsequent execution):

console.log($("#single-colorRange-color-input-container").css('display'));      
$inputContainers.show();
console.log($("#single-colorRange-color-input-container").css('display'));
console.log($("#single-colorRange-color-input-container")[0].hidden);
console.log($("#single-colorRange-color-input-container").is(':hidden'));
debugger;

First none is logged as the css/display value before .show() is called. This is expected.

Then block is logged as the css/display value after .show() is called. This is expected.

Then false is logged as the hidden attribute of the first (only) element of the result set. This is expected.

Then true is logged as the result of calling .is(':hidden'). This is unexpected.

How can .css('display') be block, [0].hidden be false, and .is(':hidden') be true? The div in actuality is/remains indeed hidden despite the call to .show(), and it would seem absurd to me to add special logic for just this one div if there is some reasonable explanation.

I've got a situation where a div is being hidden even though I just executed code that shows all other divs with the same suffix: $("[id$='-input-container']").show()

Regardless of this, one particular div remains hidden: $("#single-colorRange-color-input-container"). I thought maybe it was being hidden somewhere later in the code but no -- immediately after calling $inputContainers.show() I have added logging as follows (and the debugger statement stops all subsequent execution):

console.log($("#single-colorRange-color-input-container").css('display'));      
$inputContainers.show();
console.log($("#single-colorRange-color-input-container").css('display'));
console.log($("#single-colorRange-color-input-container")[0].hidden);
console.log($("#single-colorRange-color-input-container").is(':hidden'));
debugger;

First none is logged as the css/display value before .show() is called. This is expected.

Then block is logged as the css/display value after .show() is called. This is expected.

Then false is logged as the hidden attribute of the first (only) element of the result set. This is expected.

Then true is logged as the result of calling .is(':hidden'). This is unexpected.

How can .css('display') be block, [0].hidden be false, and .is(':hidden') be true? The div in actuality is/remains indeed hidden despite the call to .show(), and it would seem absurd to me to add special logic for just this one div if there is some reasonable explanation.

• javascript
• jquery
• css

• 1 Any demo? When I try it with demo elements, I get - none, block, false, false. – Harry Commented Dec 24, 2015 at 16:57
• 1 I get the same result as @Harry: jsfiddle/nm3o0dvp/1. Please add an example showing the issue. – Rory McCrossan Commented Dec 24, 2015 at 16:58
• Well it appears debugger may not be stopping subsequent execution, or at least that is my conclusion because I am indeed hiding the div in subsequent code. Tried to close the question but can't because there are already answers, and even though they may not address my specific case, they do still seem like they might help someone. – Dexygen Commented Dec 24, 2015 at 17:02

4 Answers 4

According to the jQuery documentation the hidden selector can return true for any of the following cases

• They have a CSS display value of none.
• They are form elements with type="hidden".
• Their width and height are explicitly set to 0.
• An ancestor element is hidden, so the element is not shown on the page.

Since hidden is a pretty simple boolean and display is block my guess would be that it is due to one of the last three, specifically the last point. Make sure all ancestors are also visible.

An ancestor of the element might be hidden, so that's why .is() might be returning true.

element.hidden only evaluates if the element has the html5 hidden attribute.

https://developer.mozilla/en-US/docs/Web/HTML/Global_attributes/hidden

This attribute must not be used to hide content that could legitimately be shown. For example, it shouldn't be used to hide tabs panels of a tabbed interface, as this is a styling decision and another style showing them would lead to a perfectly correct page.

jquery hidden is an evaluation of the visibility of the object

• They have a CSS display value of none.
• They are form elements with type="hidden".
• Their width and height are explicitly set to 0.
• An ancestor element is hidden, so the element is not shown on the page.

https://api.jquery./hidden-selector/

console.log($("#sic").css("display")); // Add css #sic { display : }

It show the by default property of the html tag. it means if tag is block it will be block if it is hidden then it will be none.

Example :

1.)

<div id="sic">Hello</div>
console.log($("#sic").css("display")); // OUTPUT : block

2.)

<div style="display:none" id="sic">Hello</div>
console.log($("#sic").css("display")); // OUTPUT : none

Result :

console.log($("#sic").css("display")); // It create the css like #sic{display: }

Use full property of CSS you will not get true if .is(':hidden')

In your case : i change id value it was too long.

<div id="sic">Hello
</div>


#sic {
  display : none;
}


console.log($("#sic").css("display")); // None
console.log($("#sic")[0].hidden); // false
console.log($("#sic").is(':hidden')); // true

Just write full property.

console.log($("#sic").css("display","block")); // displaying html
console.log($("#sic")[0].hidden); // false
console.log($("#sic").is(':hidden')); // false