collapse/expand table row

digital-ether 399 Nearly a Posting Virtuoso Team Colleague · 2008-06-06T06:31:06+00:00

Hi All,
I have a PHP application, that displays information in a table format, each rows contains specifica information which are dynamically fetched from the MySQL database. i am looking for a way to make these individual rows display more information, meaning i want to implement a functionality where in when i click on a row it expands to show more information, and when i click on the row again, it should collapse. I knw its possible in Javascript, but am very new to it, and i dont knw how to go about doing it. I would really appreiciate if somebody could give help me out. Thanks.
~Kris

You'll need to use the DOM methods:
http://www.howtocreate.co.uk/tutorials/javascript/dombasics

The simplest thing to do is to have the markup in the HTML but hide it using the style property or CSS. Then to expand it, just display it and vise versa.

eg:

<a href="#" id="expander">Expand Me</a>
<div id="expandable" style="display:none;">This is some text that is hidden</div>

Then you have the JS:

// get a reference to the expander element
var expander = document.getElementById('expander');
// set an event handler to handle when the expander link is clicked
expandar.onclick = function() {
  // get a reference to the expandable div
  var expandable = document.getElementById('expandable');
  // display it if it isn't visible, or hide it 
  if (expandable.style.display = 'none') {
    expandable.style.display = 'block';
  } else {
    expandable.style.display = 'none';
  }
};

You can do the same for table rows. You just need to select them with methods such as document.getElementById() or document.getElementsByTagName() etc,. then change their style properties or an attribute such as "class" in order to apply a different CSS rule to the element. This gives the effect of the expand collapse etc..

~s.o.s~ · 2008-06-06T09:14:18+00:00

A typo there:

if (expandable.style.display = 'none') {

should be:

if (expandable.style.display == 'none') {

digital-ether 399 Nearly a Posting Virtuoso Team Colleague · 2008-06-06T21:04:38+00:00

A typo there:

if (expandable.style.display = 'none') {

should be:

if (expandable.style.display == 'none') {

Thanks for spotting that.

I didn't mention in my post, but the javascript should be executed after the DOM is loaded. This is normally implied if you're familiar with DOM scripting but it I can remember times when I'd spend hours trying to figure out what was going wrong and the case was that the DOM was not fully loaded. So here is what a full working example would look like.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Expand a Table via DOM and Style property</title>
		<script type="text/javascript">
			window.onload = function() {
				var table = document.getElementById('expandable_table');
				if (table) {
					var trs = table.getElementsByTagName('tr');
					for(var i = 0; i < trs.length; i++) {
						var a = trs[i].getElementsByTagName('td')[0].getElementsByTagName('a')[0];
						a.onclick = function() {
							var span = this.parentNode.getElementsByTagName('span')[0];
							span.style.display = span.style.display == 'none' ? 'block' : 'none';
							this.firstChild.nodeValue = span.style.display == 'none' ? 'More' : 'Less';
						};
					}
				}
			};
		</script>
	</head>
	<body>
		
		<h2>Expandable Table</h2>
		<table id="expandable_table">
			<tbody>
				<tr><td>TD 1 <a href="#">More</a><span style="display:none;">TD 1 Extended Description</span></td></tr>
				<tr><td>TD 2 <a href="#">More</a><span style="display:none;">TD 2 Extended Description</span></td></tr>
				<tr><td>TD 3 <a href="#">More</a><span style="display:none;">TD 3 Extended Description</span></td></tr>
				<tr><td>TD 4 <a href="#">More</a><span style="display:none;">TD 4 Extended Description</span></td></tr>
			</tbody>
		</table>
		
	</body>
</html>