Thursday, April 30, 2009

Expand Collapse - Client Side using style.visibility

This is the simplest version of implementing Expand/Collapse of table rows using Javascript.
Clicking + expands the table & - collapses the table rows to the header.




Its important to note that even the selections are preserved, between expand and collapse; clearly since only the display property is altered.
I am enclosing the bare bone version of the code here. I have used some CSS to make the tables above look presentable.
Refer http://w3schools.com/css/ for more details

<br /><script language="javascript"><br />var disp = true;<br />function toggleDisplay(){<br /> if(disp){<br />  disp = false;<br />  document.getElementById("state").innerHTML="-";<br />  document.getElementById("table").style.<br />visibility="collapse";<br /> }else{<br />  disp = true;<br />  document.getElementById("state").innerHTML="+";<br />  document.getElementById("table").style.<br />visibility="visible";<br /> }<br />}<br /></script><br /></pre><br /><pre class="brush: html; wrap-lines: true"><br /><br /><body><br /> <table cellpadding="0" cellspacing="1"><br /> <thead><br />  <tr><td><a href='javascript:toggleDisplay()'><div id="state">-</div></a></td><td>Names</td></tr><br /> </thead><br /> <tbody id="table"><br />  <tr><td><input type="checkbox" name="name1"/></td><td>Ajay1</td></tr><br />  <tr><td><input type="checkbox" name="name2"/></td><td>Ajay2</td></tr><br />  <tr><td><input type="checkbox" name="name3"/></td><td>Ajay3</td></tr><br /> </tbody><br /> </table><br />

No comments: