JQuery css () does not work with visibility

Question

In the code below, I changed show() to css() and changed the visibility. For some reason, it does not appear on the screen.

Here is the HTML:

 <td class="area"> <img src="/def.jpg" /> </td> <tr id="target" style="visibility:hidden"> <td>This was hidden</td> </tr> 

and then jQuery:

 $("td.area").on("click", "img", function(){ $("tr:hidden#target").css("visibility","visible"); }); 

Answer 1

Why not just use $('tr#target') . See jsFiddle here.

Answer 2

Selector : hidden does not work with visibility only with the display . Here is the jQuery documentation http://api.jquery.com/hidden-selector/

You need to try something else:

 var t = $("#target"); if(t.css("visibility") == "hidden"){ t.css("visibility", "visible"); } 

Answer 3

See the documentation for :hidden . Elements with visibility:hidden cannot be considered :hidden .

The solution would only target tr without the :hidden selector, for example:

 $("tr#target").css("visibility","visible"); 

Answer 4

I personally would write it like this.

NOTE. I have not tested this.

 <style> #target {visibility: hidden} </style> <script> $('td.area').live('click', function(){ if ($('#target').is(":visible")) { // Do something? } else { // Make visible $('#target').css('visibility', 'visible') } }); </script> <td class="area"><img src="/def.jpg" /></td> <tr id="target"> <td>This was hidden </td> </tr>