Folding/Unfolding table with HTML/Javascript

Question

I have a table which is pretty big, so I need a way to unfold it all the time, and unfold it only necessary.

How can I do that with HTML? Do I need Javascript for this? If so, what's the code for this?

Answer 1

If you will use jquery you can check the code below.

In css:

.collapsed-table tr {
  display: none;
}

In html:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<table class="collapsed-table">
   <caption>Expand/collapce</caption> 
   <tr>
       <td></td>
   </tr>
   ....
</table>

<script type="text/javascript">
$('.collapsed-table > caption').click(function() {
   $(this).toggleClass('collapsed-table');
})
</script>