Expanding table row using javascript or CSS

I'm creating a webapp asp.net and C# t开发者_如何学运维hat will display list of users in a table but one of this fields contains lots of information and it will make a row larger. So I'm thinking that I want to create a link, then when I click this link the information will expand, then when I click again the link the information will retract. Like a +/- expand sign.

I know it's possible using javascript and CSS. Please advise.

Many thanks.

Krakat,

Try using this:

<script type="text/javascript">

var rowVisible = true;

function toggleDisplay(tbl) {
   var tblRows = tbl.rows;
   for (i = 0; i < tblRows.length; i++) {
      if (tblRows[i].className != "headerRow") {
         tblRows[i].style.display = (rowVisible) ? "none" : "";
      }
   }
   rowVisible = !rowVisible;
}

</script>

place the table tr class as "headerRow" to expand on click of the link.