<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Sandeep Gangadharan | http://www.sivamdesign.com/scripts/ */
var exp = 5;
function newCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
} else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameSG = name + "=";
var nuller = '';
if (document.cookie.indexOf(nameSG) == -1)
return nuller;
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameSG) == 0) return c.substring(nameSG.length,c.length);
}
return null;
}
function eraseCookie(name) {
newCookie(name,"",-1);
}
if (document.getElementById) {
document.writeln('<style type="text/css">')
document.writeln('.main {text-decoration:none; color:blue; cursor:hand; cursor:pointer}')
document.writeln('span:hover.mainLink {text-decoration:underline; color:red}')
document.writeln('.sublinks1 {display:none; padding-left:14px}')
document.writeln('.link2 {text-decoration:none; color:blue}')
document.writeln('a:hover.link2 {text-decoration:underline; color:red}')
document.writeln('</style>') }
// Below you should add a1, a2 etc. for each main link you wish to include
// so if you want 3 main links you should add a1, a2, a3 in the format shown
// enclosed in double quotes
var mainNum = new Array("a1","a2","a3");
// Below you should add b1, b2 etc. for each sub link you wish to include
// under one main link, here the first main link. so if you want 4 sub links you
// should add b1, b2, b3, b4 in the format shown enclosed in double quotes
var subNum1 = new Array("b1","b2");
// Below, this is for sub links under the second main link. there are 3 sub links
// in the given example
var subNum2 = new Array("c1","c2","c3");
function openClose(theName, menuArray, theID) {
for(var i=0; i < menuArray.length; i++) {
if (menuArray[i] == theID) {
if (document.getElementById(theID).style.display == "block") {
document.getElementById(theID).style.display = "none";
document.getElementById("tick_"+menuArray[i]).innerHTML = "+";
eraseCookie(theName); }
else {
document.getElementById(theID).style.display = "block";
document.getElementById("tick_"+menuArray[i]).innerHTML = "-";
newCookie(theName,menuArray[i],exp); }
}
else {
document.getElementById(menuArray[i]).style.display = "none";
document.getElementById("tick_"+menuArray[i]).innerHTML = "+";
}
}
}
function memStatus() {
var num = readCookie("MN");
if (num) {
document.getElementById(num).style.display = "block";
document.getElementById("tick_"+num).innerHTML = "-"; }
var num1 = readCookie("SB");
if (num1) {
document.getElementById(num1).style.display = "block";
document.getElementById("tick_"+num1).innerHTML = "-"; }
}
// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
memStatus();
});
</script>
<style>
.menu1 {
color:white;
background: #000;
font-family:arial, helvetica, sans-serif;
font-weight:bold;
font-size:12px;
}
.menu2 {
background: #ffff00;
color: blue;
font-family:arial, helvetica, sans-serif;
font-size:12px;
line-height: 19px;
}
</style>
<table border="0" width="130" bgcolor="#ffffff" cellpadding="2" cellspacing="0" style="background:#ffff00; color:#000000; border:#000000 1px solid">
<tr>
<td class="menu1">Collapsible Menu with Memory</td></tr>
<tr>
<td class="menu2">
<div onClick="openClose('MN',mainNum,'a1')" class="main"><span id="tick_a1">+</span> <span class="mainLink">Computing Links</span></div>
<div id="a1" class="sublinks1">
<!-- below is an example of nested sub-links under the first main link. -->
<div onClick="openClose('SB',subNum1,'b1')" class="main"><span id="tick_b1">+</span> <span class="mainLink">More Links</span></div>
<div id="b1" class="sublinks1">
<a href="http://www.thedomain.com/" class="link2">Sub-Link 1</a><br />
<a href="http://www.thedomain.com/" class="link2">Sub-Link 2</a><br />-------------<br />
</div>
<div onClick="openClose('SB',subNum1,'b2')" class="main"><span id="tick_b2">+</span> <span class="mainLink">Few More Links</span></div>
<div id="b2" class="sublinks1">
<a href="http://www.thedomain.com/" class="link2">Sub-Link 1</a><br />
<a href="http://www.thedomain.com" class="link2">Sub-Link 2</a><br />-------------<br />
</div>
<!-- end of nested sub-links example. -->
<a href="http://www.microsoft.com/" class="link2">Microsoft Corp.</a><br />
<a href="http://home.netscape.com/" class="link2">Netscape Corp.</a><br />
<a href="http://www.macromedia.com" class="link2">Macromedia Inc.</a><br />
<a href="http://www.symantec.com" class="link2">Symantec Corp.</a><br />------------------------<br />
</div>
<div onClick="openClose('MN',mainNum,'a2')" class="main"><span id="tick_a2">+</span> <span class="mainLink">JavaScript Links</span></div>
<div id="a2" class="sublinks1">
<!-- below is an example of nested sub-links under the second main link. -->
<div onClick="openClose('SB',subNum2,'c1')" class="main"><span id="tick_c1">+</span> <span class="mainLink">More Links</span></div>
<div id="c1" class="sublinks1">
<a href="http://www.thedomain.com/" class="link2">Sub-Link 1</a><br />
<a href="http://www.thedomain.com/" class="link2">Sub-Link 2</a><br />
<a href="http://www.thedomain.com/" class="link2">Sub-Link 3</a><br />
<a href="http://www.thedomain.com/" class="link2">Sub-Link 4</a><br />-------------<br />
</div>
<div onClick="openClose('SB',subNum2,'c2')" class="main"><span id="tick_c2">+</span> <span class="mainLink">Few More Links</span></div>
<div id="c2" class="sublinks1">
<a href="http://www.thedomain.com/" class="link2">Sub-Link 1</a><br />
<a href="http://www.thedomain.com/" class="link2">Sub-Link 2</a><br />-------------<br />
</div>
<div onClick="openClose('SB',subNum2,'c3')" class="main"><span id="tick_c3">+</span> <span class="mainLink">Even More Links</span></div>
<div id="c3" class="sublinks1">
<a href="http://www.thedomain.com/" class="link2">Sub-Link 1</a><br />
<a href="http://www.thedomain.com/" class="link2">Sub-Link 2</a><br />
<a href="http://www.thedomain.com/" class="link2">Sub-Link 3</a><br />-------------<br />
</div>
<!-- end of nested sub-links example. -->
<a href="http://www.sivamdesign.com/scripts/" class="link">The JS Page</a><br />
<a href="http://javascript.internet.com/" class="link2">JavaScript Source</a><br />
<a href="http://www.docjs.com/" class="link">Doc JavaScript</a><br />------------------------<br />
</div>
<div onClick="openClose('MN',mainNum,'a3')" class="main"><span id="tick_a3">+</span> <span class="mainLink">PHP Links</span></div>
<div id="a3" class="sublinks1">
<a href="http://php.resourceindex.com/Complete_Scripts/" class="link2">PHP Res. Index</a><br />
<a href="http://px.sklar.com/" class="link2">PHP Code Excng.</a><br />------------------------<br />
</div>
<div>
<a href="#" class="link">Another Link 1</a><br />
<a href="#" class="link">Another Link 2</a><br />
<a href="#" class="link">Another Link 3</a><br />
</div>
</td></tr>
</table>
<!--
Each collapsible link has 2 DIV tags, one is the main link that opens or closes the collapsible
links and the other is for the collapsible links. In the first DIV tag the text
[onClick="openClose('MN',mainNum,'a1')" class="main"] should not be changed and in the second DIV tag
the text [id="a1" class="sublinks"] is required. As you add more collapsible links the identifier
'a1' should be incremented for all new links in both DIV tags, for example a2 for link 2, a3 for
link 3 etc. Also for each collapsible link there is a SPAN tag that changes the + sign to - when
the menu is expanded. For each SPAN tag also there is text (id="tick_a1"). This identifier
also needs to be changed by matching the identifier 'a1' to the DIV identifier.
Each group of sub-links under each main link also should have text [openClose('SB',subNum1,'b1')"
class="main"]. The text [subNum1] should also be incremented with each main link. For
example for the main link a1, the sub-links should be ['SB',subNum1,'b1'], ['SB',subNum1,'b2'] etc.
and for main link a2, the sub-link should be ['SB',subNum2,'c1'], ['SB',subNum2,'c2'] etc.
Everything else can be modified as per your requirements. Lastly, you can get rid of these comments in
your documents.
-->
