Show, Expand / Hide, Collapse page elements

I'm trying to find the simplest cross-compatible way to Show, Expand / Hide, Collapse page elements. I've googled my butt of all day trying to find a simple answer but haven't found any.

Take this as an example to work with:


<html>
<head>
<!-- The External JS code-->
<script type="text/javascript" src="../javascript/showhide.js"></script>
</head>
<body><!-- Link to expand content-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="middle"><span class="MyCssStyle"><a href="">Content</a> (click to expand)</span></td>
 </tr>
</table>
<!-- Expandable contnet (the table in this case), hidden on page load-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="middle">Expanded Content <span class="anytext"></span></td>
 </tr>
</table></body>
</html>

A couple of things to note:
--------------------------------
1.) Javascript is loaded externally
2.) Css styles are applied to both the Show/Hide link and the expandable content
3.) The elements won't be one after the other like the example, so it would be nice to expand them with <div> tags that are named... or whatever, I'm really only going to have three show/hide sections.

Cheers!

Show, Expand / Hide, Collapse page elements

iamrick

coopster

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week