Step

We are viewing a Collapsible menu using JavaScript, ( you could have accomplished with TreeView Control http://manas6/aspnet.35/mm.master3C/Default.aspx ).

Step: 1 Create web site ( http://manas6/aspnet.35/mm.AjaxCollpasibleMenu1/ )

Step: 2 Codes

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#B1
{
width: 71px;
}
#div1
{
width: 400px; height:500px; background-color: #FFFFCC;
}
</style>
<link rel="stylesheet" type="text/css" href="foldtree.css" media="screen, projection"/>

</head>
<body> <form id="form1" runat="server">
<div id="div1" >
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/scripts/majax.js" />
</Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel runat="server">
</asp:Panel></ContentTemplate>
</asp:UpdatePanel>
<br/>
<ul id="navigation" class="foldertree">
<li><a href="/">Home</a></li>
<li><a href="/about/">About us</a>
<ul>
<li><a href="/services/">Our services</a>
<ul>
<li><a href="/manufacture/">Manufacturing</a>
<ul>
<li><a href="/manufacture/">Manufacturing</a>
<ul>
<li><a href="/manufacture/">Manufacturing</a></li>
<li><a href="/distribute/">Distribution</a></li>
</ul>
</li>
<li><a href="/distribute/">Distribution</a></li>
</ul>
</li>
<li><a href="/distribute/">Distribution</a></li>
</ul>
</li>
<li><a href="/products/">Our products</a>
<ul>
<li><a href="/widgets/">Widgets</a></li>
<li><a href="foldertree.html">Spoons</a>
<ul>
<li><a href="/spoons/">Teaspoons</a></li>
<li><a href="/spoons/">Desert spoons</a></li>
<li><a href="/spoons/">Soup spoons</a></li>
<li><a href="/spoons/">Jam spoons</a>
<ul>
<li><a href="/spoons/">Silver plated</a></li>
<li><a href="/spoons/">Solid silver</a></li>
<li><a href="/spoons/">Antique</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="/contact/">Contact us</a>
<ul>
<li><a href="/phone/">By phone</a></li>
<li><a href="/email/">By email</a></li>
</ul>
</li>
</ul>
</div>
</form>
</body>
</html>
majax.js

function treeMenu(navid, indexpage) {
if (typeof document.getElementById == 'undefined') { return; }

var rollover = new Image;
rollover.src = 'down-red.gif';
rollover = new Image;
rollover.src = 'minus.gif';

var tree = document.getElementById(navid);
if (tree) {
var items = tree.getElementsByTagName('li');
for (var i = 0; i < items.length; i++) {
treeTrigger(tree, items[i], navid);
}

if (navigator.vendor == 'Apple Computer, Inc.'
|| typeof window.opera != 'undefined') {
displayReset(tree);
}

findHere(tree, navid, indexpage);
}
}

var isreset = false;

function displayReset(tree) {
var menus = tree.getElementsByTagName('ul');
for (var i = 0; i < menus.length; i++) {
if (menus[i].style.position != 'static') {
menus[i].style.display = 'none';
}
menus[i].style.position = 'static';
}
isreset = true;
}

function treeTrigger(tree, li, navid) {
var a = li.getElementsByTagName('a')[0];
var menu = li.getElementsByTagName('ul').length > 0
? li.getElementsByTagName('ul')[0] : null;

if (menu) {
li.className += (li.className == '' ? '' : ' ') + 'hasmenu';
}

li.onclick = function(e) {
var target = e ? e.target : window.event.srcElement;
while (target.nodeName.toUpperCase() != 'LI') {
target = target.parentNode;
}
if (target == this && isreset) {
if (menu) {
if (menu.style.display == 'none') {
clearSiblingBranches(this);
menu.style.display = 'block';
a.className += (a.className == '' ? '' : ' ') + 'rollover';
}
else {
menu.style.display = 'none';
a.className = a.className.replace(/ ?rollover/g, '');
}
return false;
}
else {
return true;
}
}
};

attachEventListener(a, 'keyup', function(e) {
if (!isreset && e.keyCode == 9) {
displayReset(tree);
}
}, false);

var moves = 0;
attachEventListener(a, 'mousemove', function() {
if (!isreset) {
moves++;
if (moves > 2) { displayReset(tree); }
}
}, false);
}

function clearSiblingBranches(trigger) {
var menus = trigger.parentNode.getElementsByTagName('ul');
for (var i = 0; i < menus.length; i++) {
menus[i].style.display = 'none';

var a = menus[i].parentNode.getElementsByTagName('a')[0];
if (a) {
a.className = a.className.replace(/ ?rollover/g, '');
}
}
}

function findHere(tree, navid, indexpage) {
var page = document.location.href;
page = page.replace(indexpage, '').replace(/,/g, '%2C');

var links = tree.getElementsByTagName('a');
var matches = [];
for (var i = 0; i < links.length; i++) {
var href = links[i].href;
if (href && !/[a-z]+\:\/\//.test(href)) {
matches = [];
break;
}

href = href.replace(indexpage, '').replace(/,/g, '%2C');
if (href != '' && page.indexOf(href) != -1) {
matches[matches.length] = links[i];
}
}
if (matches.length < 1) { return; }

var probabilities = [];
for (i = 0; i < matches.length; i++) {
href = matches[i].href;
probabilities[i] = [0, href];

for (var j = 0; j < href.length; j++) {
if (href.charAt(j) == page.charAt(j)) {
probabilities[i][0]++;
}
}
}

probabilities.sort(compare);
href = probabilities[0][1];

for (i = 0; i < links.length; i++) {
if (links[i].href == href) {
youAreHere(links[i], href, navid);
break;
}
}
}

function compare(a, b) {
return b[0] - a[0];
}

function youAreHere(link, href, navid) {
link.className += (link.className == '' ? '' : ' ') + 'rollover';

var li = link.parentNode;
var menu = li.getElementsByTagName('ul').length > 0
? li.getElementsByTagName('ul')[0] : null;

if (menu) {
menu.style.display = 'block';
menu.style.position = 'static';
}

var text = (link.getAttribute('title') && link.title != '')
? link.title : link.firstChild.nodeValue;

link.title = text + (link.href == href
? ' [you are here]' : ' [you\'re in this section]');

if (li.parentNode.id != navid) {
link = li.parentNode.parentNode.getElementsByTagName('a')[0];
youAreHere(link, href, navid);
}
}

function attachEventListener(target, eventType, functionRef, capture) {
if (typeof target.addEventListener != 'undefined') {
target.addEventListener(eventType, functionRef, capture);
}
else if (typeof target.attachEvent != 'undefined') {
target.attachEvent('on' + eventType, functionRef);
}
else {
eventType = 'on' + eventType;

if (typeof target[eventType] == 'function') {
var oldListener = target[eventType];

target[eventType] = function() {
oldListener();

return functionRef();
}
}
else {
target[eventType] = functionRef;
}
}

return true;
}

function addLoadListener(fn) {
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('load', fn, false);
}
else if (typeof document.addEventListener != 'undefined') {
document.addEventListener('load', fn, false);
}
else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onload', fn);
}
else {
var oldfn = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
}
else {
window.onload = function() {
oldfn();
fn();
};
}
}
}

addLoadListener(function() { treeMenu('navigation', 'Default.aspx'); });

foldtree,css

/* structural styles and offsets */
ul.foldertree, ul.foldertree li, ul.foldertree ul {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
}

ul.foldertree {
position: relative;
cursor: default;
width: 8.2em;
}

ul.foldertree li {
position: relative;
text-align: left;
cursor: pointer;
cursor: hand;
width: 8.2em;
margin: -1px 0 0 0;
}

ul.foldertree ul {
cursor: default;
width: 8.2em;
padding: 2px 0;
position: absolute;
left: -100em;
margin: 0 0 0 1em;
}

ul.foldertree ul li {
width: 8.2em;
}

/* design styles */
ul.foldertree a:link, ul.foldertree a:visited {
display: block;
cursor: pointer;
cursor: hand;
padding: 1px 0 1px 15px;
font: 0.7em tahoma, verdana, sans-serif;
color: #000;
text-decoration: none;
letter-spacing: 1px;
}

ul.foldertree a:hover, ul.foldertree a:focus, ul.foldertree a:active {
text-decoration: underline;
color: #007;
}

/* plus/minus icons */
ul.foldertree li.hasmenu > a:link, ul.foldertree li.hasmenu > a:visited {
background: url(plus.gif) no-repeat 1% 50%;
}

ul.foldertree li.hasmenu > a.rollover:link,
ul.foldertree li.hasmenu > a.rollover:visited {
background: url(minus.gif) no-repeat 1% 50%;
}

* html ul.foldertree li.hasmenu a:link,
* html ul.foldertree li.hasmenu a:visited {
background: expression(/hasmenu/.test(this.parentNode.className)
? "url(plus.gif) no-repeat 1% 50%" : "transparent");
}

* html ul.foldertree li.hasmenu a.rollover:link,
* html ul.foldertree li.hasmenu a.rollover:visited {
background: expression(/hasmenu/.test(this.parentNode.className)
? "url(minus.gif) no-repeat 1% 50%" : "transparent");
}

/* browser hacks */
@media screen, projection {
* html ul.foldertree li {
display: inline;
float: left;
background: #fff;
}
}

Step: 3 Run time menu