JAVASCRIPT EXAMPLES:

COPY - Insert Between Head Tags: <HEAD></HEAD>

var head="display:''"
img1=new Image()
img1.src="images/bluefolder.gif"
img2=new Image()
img2.src="images/folder.gif"

var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentElement
}

if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(images/folder.gif)"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url(images/bluefolder.gif)"
}
}
}

if (ie4||ns6)
document.onclick=checkcontained

//-->
</script>

COPY - Insert Inside Body: <BODY></BODY>

<p align='left'>
<ul>
   <li id="foldheader">News</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
      <li><a href="http://www.cnn.com/">CNN</a></li>
      <li><a href="http://www.abcnews.com/">ABC News</a></li>
      <li><a href="http://www.cbsnews.com/">CBS News</a></li>
   </ul>
   <li id="foldheader">Javascripts</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
      <li><a href="http://www.jdstiles.com/javamain.html">Uncle Jim's</a></li>
      <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
      <li><a href="http://www.freewarejava.com">Freewarejava.com</a></li>
   </ul>
   <li id="foldheader">Nested Example</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
      <li><a href="http://www.jdstiles.com/">outer 1</a></li>
      <li><a href="http://www.jdstiles.com/">outer 2</a></li>
      <li id="foldheader">Nested</li>
      <ul id="foldinglist" style="display:none" style=&{head};>
         <li><a href="http://www.jdstiles.com/sets/">Design Sets</a></li>
         <li><a href="http://www.jdstiles.com/jds.main_office.html">Office Tips</a></li>
      </ul>
      <li><a href="http://www.jdstiles.com/java/feedback.html">Comments</a></li>
      <li><a href="http://www.jdstiles.com/java/guestbook.html">Guest Book</a></li>
   </ul>
</ul>
</font></p>
<script language="JavaScript1.2">
<!--

var foldercontentarray=new Array()
var c=0

if (ns6){
for (i=0;i<document.getElementsByTagName("UL").length;i++){
if (document.getElementsByTagName("UL")[i].id=="foldinglist"){
foldercontentarray[c]=document.getElementsByTagName("UL")[i]
c++
}
}
}

if (get_cookie(window.location.pathname) != ''){
  var openresults=get_cookie(window.location.pathname).split(" ")
  for (i=0 ; i < openresults.length ; i++){
    if (ns6){
    foldercontentarray[openresults[i]].style.display=''
    foldercontentarray[openresults[i]].previousSibling.previousSibling.style.listStyleImage="url(open.gif)"
    }
    else{
    foldinglist[openresults[i]].style.display=''
    document.all[foldinglist[openresults[i]].sourceIndex -1].style.listStyleImage="url(open.gif)"
    }
  }
}

if (ns6||ie4){
var nodelength=ns6? c-1 : foldinglist.length-1
var nodes=new Array(nodelength)
var openones=''
}

function checkit(){
  for (i=0 ; i <= nodelength ; i++){
    if ((ns6&&foldercontentarray[i].style.display=='')||(ie4&&foldinglist[i].style.display==''))
       openones=openones + " " + i
  }
  document.cookie=window.location.pathname+"="+openones
}

if (ns6||ie4)
window.onunload=checkit
//-->
</script>

Expanding Folder Header