Jquery .show() to display div tag

Question

I am using this code to display a grid

$('#table1 tr').bind('click', shows);

function shows() {
    $('#table').show();
}

Where #table is the following HTML fragment:

<div id="table">
  <p>shiva</p>
</div>

I am not able to show shiva? is this right what I am doing here?

thanks

Answer 1

$("#table1 tr").click(function(){
   $('#table').show();
});

Answer 2

You may be running into a situation where "shows" is not yet defined, so you're effectively binding the click handler to a null function. (Your context may cause this to be different, though.)

So, you could do as Jon suggested and put the function inside the click handler binding call. Or, you could move the shows function declaration above the click handler binding.

You could also be in a situation where some CSS styling is causing your "table" div to be invisible no matter what the "display" value is set to. (This could be margins, height, width, color, font-size, etc.)

Answer 3

Ok you're not explaining yourself very well but this is what i'm interpreting:

<!-- HTML -->
<div id="grid1">... some html ie. tables etc</div>
<div id="grid2">... some more html</div>

You want grid2 to be hidden by default and shown once grid1 is clicked.

/*CSS*/  
#grid2{display:none;}

/*Javascript*/
$("#grid1").click(function(){
  $("#grid2").show();
});