Easy Collapsible HTML page sections
By Peter Bromberg
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
Popularity (276 Views)