> Is there anyway of adapting the script to work with Mozilla and IE?
Try this modified script which works in IE5+ and Mozilla. I've made
comments to explain to you what's happening. The id's are now classes
so you can have multiple collapsible lists.
Hope this helps
--J
=========================
function change(evt) {
var tgt = (evt) ? evt.target : window.event.srcElement;
// tgt is now the deepest event target under the click event.
// The conditional is to get the correct object from both the
// W3C (Mozilla) and MSIE event models.
while (tgt.nodeName.toLowerCase()!="ul" && tgt.className!="foldheader") {
tgt = tgt.parentNode;
// this loop bubbles up through the content model until
// tgt is either a <ul> or a <li class="foldheader">.
}
if (tgt.className=="foldheader") { // if tgt is the header <li>:
// Check each child of the <li> to see if it is a foldinglist:
// If so, change the styles to collapse/expand the list:
for (var i=0;i<tgt.childNodes.length;i++) {
var nested = tgt.childNodes[i];
if (nested.className=="foldinglist") {
if (nested.style.display=="none") {
nested.style.display='';
tgt.style.listStyleImage="url(open.gif)";
} else {
nested.style.display="none";
tgt.style.listStyleImage="url(fold.gif)";
}
}
}
}
}
document.onclick=change;
...
<ul>
<li class="foldheader">
<span class='LFrameCategoryTitle'>= General =</span>
<ul class="foldinglist">
<li type="square"><a href="#">Complaint</a>
<li type="square"><a href="#">Suggestions</a>
<li type="square"><a href="#">Schedule Appointment</a>
<li type="square"><a href="#">Schedule Standby</a>
<li type="square"><a href="#">Infomation</a>
</ul>
</li>
</ul>
