Sandeep's JavaScript Page - Navigation Scripts - Collapsible Menu

Collapsible Menu - II

+ Computing Links

+ More Links

Sub-Link 1
Sub-Link 2
-------------

+ Few More Links

Sub-Link 1
Sub-Link 2
-------------

Microsoft Corp.
Netscape Corp.
Macromedia Inc.
Symantec Corp.
------------------------

+ JavaScript Links

+ More Links

Sub-Link 1
Sub-Link 2
Sub-Link 3
Sub-Link 4
-------------

+ Few More Links

Sub-Link 1
Sub-Link 2
-------------

+ Even More Links

Sub-Link 1
Sub-Link 2
Sub-Link 3
-------------

The JS Page
JavaScript Source
Doc JavaScript
------------------------

+ PHP Links

PHP Res. Index
PHP Code Excng.
------------------------

Another Link 1
Another Link 2
Another Link 3

On the left of this page in yellow with black border is the Collapsible Menu - II. The menu has collapsible links. Clicking on those main links with the + symbol in front would open a hidden bunch of links. Such hidden links are mostly related to the main link which opens them. You can add any number of collapsible links or ordinary links to the menu. You can also add unlimited nested sub-links as shown in the example. Additionally if you click a main link it would close other open links related to any other main link while opening its own hidden links. This is applicable to the sub-links under each main link as well. You can completely change the appearance of the menu to best suit your needs.

Note: This script does not work with older browsers like Netscape v4.x but degrades very well.

Author: Sandeep Gangadharan
Home Page: http://www.sivamdesign.com/home/

The script is given below:

This goes in the HEAD of the html file:

var mainNum = new Array("a1","a2","a3");  // at the left 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 subNum1 = new Array("b1","b2");  // at the left 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 subNum2 = new Array("c1","c2","c3");  // this is for sub links under the second main link. there are 3 sub links
                                           // in the given example

This goes in the BODY of the html file:

<table border="0" width="130" bgcolor="#ffffff" cellpadding="2" cellspacing="0" style="background:#ffff00; color:#000000; border:#000000 1px solid">
   <tr><td bgcolor="#000000" style="font-family:arial, helvetica, sans-serif; font-weight:bold; color:white; font-size:12px">Collapsible Menu - II</td></tr>
   <tr><td bgcolor="#ffff00" style="font-family:arial, helvetica, sans-serif; font-size:12px; color: blue; line-height: 19px">
      <div onClick="openClose(mainNum,'a1')" class="main"><span id="tick_a1">+</span> <span class="mainLink">Computing Links</span></div>
      <div id="a1" class="sublinks1">

<div onClick="openClose(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(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>

<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(mainNum,'a2')" class="main"><span id="tick_a2">+</span> <span class="mainLink">JavaScript Links</span></div>
      <div id="a2" class="sublinks1">

<div onClick="openClose(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(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(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>

<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(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(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(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 [subNum1,'b1'], [subNum1,'b2'] etc.
     and for main link a2, the sub-link should be [subNum2,'c1'], [subNum2,'c2'] etc.

Everything else can be modified as per your requirements. Lastly, you can get rid of these comments in
     your documents. -->

Collapsibe Menu - II