AceJS.com > Script number: 118009

The Script

Click on the icon for "Main Link 1" or "Main Link 5" to see them expand.

Main Link 1

The Source

The images: Right Click on them and choose "Save Picture As..." from the menu. (Make sure you Don't change their filenames and you save all of them in the same folder)

<HTML>
<HEAD><TITLE>Free Scripts And Tools For Webmasters @ www.AceJS.com</TITLE>
</HEAD>
<BODY>
<script language="JavaScript">
img1=new Image();
img1.src="closed_fold.gif";
img2=new Image();
img2.src="open_fold.gif";
function leftNav(theListId, theImageId){
foldercontent = document.getElementById(theListId);
folderImage = document.getElementById(theImageId);
if (foldercontent.style.display=="none"){
foldercontent.style.display="";
folderImage.src = "open_fold.gif";}
else{
foldercontent.style.display="none";
folderImage.src = "closed_fold.gif";}
}
</script>

<ul style="list-style-image:url(blank.gif);">
	<li id="foldhead"><img id="headerImg1" src="closed_fold.gif" onClick="leftNav('foldlist1','headerImg1')" style="cursor:hand;">
	<a href="#">Main Link 1</a>
	</li>
	<ul id="foldlist1" style="DISPLAY:none">
		<li><img src="open_fold.gif"> <a href="#">Sub Link 1.1</a></li>
		<li><img src="open_fold.gif"> <a href="#">Sub Link 1.2</a></li>
	</ul>
	<li><img src="open_fold.gif"> <a href="#">Main Link 2</a></li>
	<li><img src="open_fold.gif"> <a href="#">Main Link 3</a></li>
	<li><img src="open_fold.gif"> <a href="#">Main Link 4</a></li>
	<li><img id="headerImg2" src="closed_fold.gif" onClick="leftNav('foldlist2','headerImg2')" style="cursor:hand;">
	<a href="#">Main Link 5</a>
	</li>
	<ul id="foldlist2" style="DISPLAY:none">
		<li><img src="open_fold.gif"> <a href="#">Sub Link 5.1</a></li>
		<li><img src="open_fold.gif"> <a href="#">Sub Link 5.2</a></li>
		<li><img src="open_fold.gif"> <a href="#">Sub Link 5.3</a></li>
		<li><img src="open_fold.gif"> <a href="#">Sub Link 5.4</a></li>
	</ul>
	<li><img src="open_fold.gif"> <a href="#">Main Link 6</a></li>
	<li><img src="open_fold.gif"> <a href="#">Main Link 7</a></li>
	<li><img src="open_fold.gif"> <a href="#">Main Link 8</a></li>
	<li><img src="open_fold.gif"> <a href="#">Main Link 9</a></li>
</ul>
<P>
<B><A HREF="http://www.AceJS.com">AceJS.com</A> The JavaScript Directory</B>
</BODY>
</HTML>