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
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 />