Expanding table row using javascript or CSS

Question

I'm creating a webapp asp.net and C# that 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.

Siva Charan · Accepted Answer · 2011-06-05 07:30:42Z

1

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.

answered Jun 5, 2011 at 7:30

Siva Charan

18.1k10 gold badges64 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Expanding table row using javascript or CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related