I have a very simple input tag:

<input id="DAhour" type="number" style="width:50px; font-size: xx-small; visibility:hidden">

which at first has to be not visible. Then if I change a bobox to the correct index it should bee visible. I managed to get the bobox and the selected item correctly but I cannot make the input tag visible. I tried with:

$("#DAhour").css("visibility", "visible");

but it doesn't work because if I check the visibility with

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

it stays always equal to false. Then, when the bobox changes again I should be able to make it not visible again, si I tried again with

$("#DAhour").css("visibility", "hidden");

I have a very simple input tag:

<input id="DAhour" type="number" style="width:50px; font-size: xx-small; visibility:hidden">

which at first has to be not visible. Then if I change a bobox to the correct index it should bee visible. I managed to get the bobox and the selected item correctly but I cannot make the input tag visible. I tried with:

$("#DAhour").css("visibility", "visible");

but it doesn't work because if I check the visibility with

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

it stays always equal to false. Then, when the bobox changes again I should be able to make it not visible again, si I tried again with

$("#DAhour").css("visibility", "hidden");

• javascript
• jquery
• html

3 Answers 3

Because when you use visibilty rule, even though the element is not visible it consumes space in DOM. So, jQuery's visible selector will consider it as visible.

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

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.

If you want to really hide the element use the display rule, ie display: none or the short hand method .hide()/show()

try using $("#DAhour").show() and $("#DAhour").hide() methods

Try to check the visibility with:

if($("#DAhour").css("visibility")!== "hidden")

And change visibility with

$("#DAhour").css("visibility","hidden");

$("#DAhour").css("visibility","visible");