Toggle table visability via a link (Joomla cms)

craptakular

craptakular

craptakular

Soldato
Joined
7 Jan 2007
Posts
10,607
Location
Sussex, UK
So what I'm trying to do is have "table1" always visible, with "table1_moreinfo"
being hidden until a link/image is clicked on from within "table1".

From my afternoon of googling I think I may need to use Javascript, but I'm totally stupmed on how to do that.

This website making is fairly new to me so please help me if you can and treat me like an idiot.

Code: 
<table id="table1;" style="width: 100%;" border="1">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<table id="table1_moreinfo;" style="width: 100%;" border="1">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
 
Put this in your head

Code: 
	<script type="text/javascript">
		function display (category) {
			var whichcategory = document.getElementById(category);
			if (whichcategory.className=="show") {
				whichcategory.className="hide";
			} else {
				whichcategory.className="show";
			}
		};
	</script>

then for the link just use

Code: 
<a href="javascript:display('table1_moreinfo')">Clicky Here</a>

for this to work you will need to have the table set up like so

Code: 
<table id="table1;" style="width: 100%;" border="1">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<table class="hide" id="table1_moreinfo;" style="width: 100%;" border="1">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>

this ensures the content stays hidden when the page loads up.

finally you'll need to add to extra classes to your stylesheet.

Code: 
.show {
display: inline;
}

.hide {
display: none;
}

A word of warning, I've only tried this previously with divs but I think it should work with tables too
 
will test it tommorrow on my website.

Tried it just now by creating a .html file in notbad and opening it in opera, but it didn't work.

Probably me being dumb
 
Code: 
<table id="table1;" style="width: 100%;" border="1">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<table class="hide" id="table1_moreinfo" style="width: 100%;" border="1">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
Try that intead, I put a semi-colon after table1_moreinfo by mistake.

I made a quick working version here if you're still having problems
 
You must log in or register to reply here.
Back
Top Bottom