Easy Collapsible HTML page sections

I had to put some sections of form elements on a diet in a web page and it seemed like all the sample "collapsible divs" I found had way too much code, or were too complex. I needed something really simple with no dependency on images, and not finding any, I rolled my own.

I had to put some sections of form elements on a diet in a web page and it seemed like all the sample "collapsible divs" I found had way too much code, or were too complex. I needed something really simple with no dependency on images, and not finding any, I rolled my own.

Here's how it works:

<script>
function exp(strTag ,strAttribute){
var elem = document.getElementsByTagName(strTag);
var elem1 =window.event.srcElement;
for (var i=0;i<elem1.children.length;i++){
elem1.children[i].innerText=="4"?elem1.children[i].innerText="5":elem1.children[i].innerText="4";
}
for (var i =0;i<elem.length;i++)
{
if(elem[i].getAttribute(strAttribute)=="yes")
{
elem[i].style.display=='none'? elem[i].style.display='block':elem[i].style.display='none';
}
}
}
</script>
<BODY>
<div id=howdy6 exp2='yes' style="display:none;">You can even put elements that need to work together in a new area!</div>
<table>
<tr id =tr1 bgcolor=#ffcc66 onclick="exp('tr','exp');">
<td id=td1 colspan=2 align=center><font face=Webdings color=blue>4</font> Contact Info (click to show)</td>
</tr>
<tr bgcolor=#ffcc66 exp="yes" style="display:none;"><td>First name</td><td><input type=text></td></tr>
<tr bgcolor=#ffcc66 exp="yes" style="display:none;"><td>Last name</td><td><input type=text></td></tr>
<tr bgcolor=#ffcc66 exp="yes" style="display:none;"><td>Phone Number</td><td><input type=text></td></tr>
<tr bgcolor=#ffcc66 exp="yes" style="display:none;"><td>Email</td><td><input type=text></td></tr>
</table>
<div id=howdy onclick="exp('div','exp2');"><font face=Webdings color=BLUE>4</font> click here for some expandable divs...</div>
<div id=howdy2 exp2='yes' style="display:none;">I'm a div!</div>
<div id=howdy3 exp2='yes' style="display:none;">More of them divs...</div>
<div id=howdy4 exp2='yes' style="display:none;">Me too! divs...</div>
</BODY>

Pick a custom attribute (e.g., "exp2") that you want to use to group elements together.

Place a "title" element (div, TR, whatever) that you use to display the message and allow users to expand or collapse that group. It should have an onclick
handler that calls the exp function ,
such as onclick="exp('div','exp2');
that passes in the tag name and the specified attribute for that group.



You can look at it in action and get the source code by simply viewing source on the page linked here:

http://www.eggheadcafe.com/articles/collapser.htm



Submission Date:  9/23/2005 3:21:33 PM
Submitted By:  Peter Bromberg
My Home Page:  http://www.eggheadcafe.com

By Peter Bromberg   Popularity  (948 Views)