jQuery css() not working with visibility

Question

In the code below I have changed show() to css() and modified the visibility. For some reason it doesn't show up onclick.

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 the jQuery:

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

Answer 1

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

You have to try something different:

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

Answer 2

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