> Did you make the sections on the pages
> collapsible with JS?
Yes. The JS below is included in an external JS file. The HTML code
below is wrapped up as a CF custom tag where "myUniqueId" is a tag
attribute. The attribute needs to be unique for each box or JS doesn't
know which one you are referring to. The code assumes you have two
images: collapsed.gif and expanded.gif but will run without them. When
you click the title bar, three things are toggled: the visibility of the
box, the arrow image's src attribute, and the arrow image's title
attribute. The code below will work as is -- just paste into HomeSite.
Here's what happens: when you click on the Title DIV the onclick() event
occurs and the toggleDisplay() function runs. The first line of the
function puts the div called "myUniqueId" in a variable. This is just to
save typing. You could replace all the "obj"s with
"document.getElementById(id)".
We determine whether the box is currently expanded or collapsed by
looking at the DIV tag's display style. If it's set to none, then the
box is currently hidden so we should expand it, and vice versa.
splitSrc is all about chopping up the URL of the image so we change the
name of the image but still keep the path to the image. Toggling the
image makes the code a bit harder to follow. We take the image path and
split it into an array. The last entry in the array is either
"collapsed.gif" or "expanded.gif".
The if clause is where we actually start changing things.
obj.style.display sets the visibility of the box.
splitSrc[splitSrc.length-1] sets the last entry in the array
representing the image path. arrow.title sets the IMG tag's title
attribute.
Finally, we turn the array representing the image path back into a
string with join() and set the IMG tag's src attribute to the new value.
<script>
function toggleDisplay(id) {
var obj = document.getElementById(id);
var arrow = document.getElementById(id + "_arrow");
var expanded = obj.style.display != "none";
var splitSrc = arrow.src.split("/");
if ( expanded ) {
obj.style.display = "none";
splitSrc[splitSrc.length-1] = "collapsed.gif";
arrow.title = "Expand";
}
else {
obj.style.display = "block";
splitSrc[splitSrc.length-1] = "expanded.gif";
arrow.title = "Collapse";
}
arrow.src = splitSrc.join("/");
}
</script>
<div style="width : 200px; height : 200px">
<div style="background-color : #999999"
onclick="toggleDisplay('myUniqueId')">
Title
<img id="myUniqueId_arrow" title="Collapse"
src="arrow_expanded.gif">
</div>
<div id="myUniqueId" style="background-color : #cccccc">
lorem ipsum
</div>
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Logware (www.logware.us): a new and convenient web-based time tracking
application. Start tracking and documenting hours spent on a project or with a
client with Logware today. Try it for free with a 15 day trial account.
http://www.houseoffusion.com/banners/view.cfm?bannerid=67
Message: http://www.houseoffusion.com/lists.cfm/link=i:4:222522
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54
