CODEWITHSUNDEEP
jquerycss
Satch3000
Satch3000

Reputation: 49384

jQuery css() not working with visibility

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");
});

Upvotes: 6

Views: 32836

Answers (4)

davissp14
davissp14

Reputation: 765

I would personally write it like this.

NOTE: I did not test 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>

Upvotes: 1

epignosisx
epignosisx

Reputation: 6192

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"); 
}

Upvotes: 10

Purag
Purag

Reputation: 17061

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

The solution would be to just target the tr without the :hidden selector, like so:

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

Upvotes: 0

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

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

Upvotes: 4

Related Questions