Toggling Tree menu

This examples uses JavaScript and may be used in the place of TreeView control that came with Visual studio. http://manas6/aspnet.35/mm.TreeViewFrame1/Default3.aspx . Using a master template the other pages can be loaded very similar to this one. The main distinctions of this example will rest on the JavaScript's (Ajax)  than  a xml loading file.

Step: 1 Create a website http://manas6/aspnet.35/Expression_Toggle3/

Step: 2  Codes

mQuery.js

var $ = document.getElementById;
var $$ = document.getElementsByTagName;
// the following will handle toggle and then ajax page load
//other javascript will be added to support web-pages
var details = false; var isreset = false; var doc = false; var number = 0;
//// FireFox and Opera, this functions will not be displayed in
//doc.innerHTML +=
function treeMenu(navid, indexpage) {
//doc.innerHTML += "<br/> treeMenu(navid, indexpage) nvid "+ navid + " -- indexpage " + indexpage.toString();
if (typeof document.getElementById == 'undefined') { return; }
var rollover = new Image;
rollover.src = 'down-red.gif';
rollover = new Image;
rollover.src = 'minus.gif';
// get the element using DOM
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') {
resetNodes(tree);
}
resolveBrowser(tree, navid, indexpage);
}
number++;
}
//// In FireFox and IE, this functions will be displayed in
// Opera will not display any resutl in
// //doc.innerHTML +=
function resetNodes(tree) {
var menus = tree.getElementsByTagName('ul');
//doc.innerHTML += "<br/>resetNodes(tree) " + menus;
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;
}
// only IE will add result in
////doc.innerHTML +=
function treeTrigger(tree, li, navid) {
//doc.innerHTML += "<br/>treeTrigger(tree, li, navid)" + li.toString();
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) {
resetNodes(tree);
}
}, false);

var moves = 0;
attachEventListener(a, 'mousemove', function() {
if (!isreset) {
moves++;
if (moves > 2) { resetNodes(tree); }
}
}, false);
}
// All the Browsers will add results
function clearSiblingBranches(trigger) {
//doc.innerHTML += "<br/> 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, '');
}
}
}
// Only IE will display the result
function resolveBrowser(tree, navid, indexpage) {
var page = document.location.href;
//doc.innerHTML += "<br/> resolveBrowser(tree, navid, indexpage)" + tree + navid + indexpage;
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) {
previousPage(links[i], href, navid);
break;
}
}
}
// Only IE will display while refreshing the page.
function compare(a, b) {
//doc.innerHTML += "<br/> Compare" + a + "--: -- "+ b;
return b[0] - a[0];
}
// Only IE will display while refreshing the page.
//The previous menu will remain expanded in IE (contrast to Opera, Fire Fox)
//
function previousPage(link, href, navid) {
//doc.innerHTML += "<br/> previousPage(link, href, navid)" + link + href.toString() + 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];
previousPage(link, href, navid);
}
}

function attachEventListener(target, eventType, functionRef, capture) {
//doc.innerHTML += "<br/> 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;
}
// http://www.tek-tips.com/faqs.cfm?fid=4862
// FireFox and Opera, this functions will be displayed in
// //doc.innerHTML +=
function addOnloadEvent(fn) {
//doc.innerHTML += "<br/> addLoadListner(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();
};
}
}
}
// http://www.tek-tips.com/faqs.cfm?fid=4862
//// FireFox and Opera, this functions will be displayed in
// //doc.innerHTML +=
//this function will fire first, and will be registered in IE 8.0
addOnloadEvent(function() {
//doc.innerHTML += "<br/>addOnloadEvent(function() fired";
treeMenu('ulNodes', 'Default.aspx');
});
// page loader starts
var xmldoc = false;
var links = document.getElementsByTagName("span");
var details = false;
function getHTTPObject() {
var ajaxObject = false;
//doc.innerHTML += "<br/> getHTTPObject() fired ";
if (window.XMLHttpRequest) {
ajaxObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
ajaxObject = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxObject = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
ajaxObject = false;
}
}
}
return ajaxObject;
}

function grabFile(file, divx) {
//divx parameter will target the div1 or div2 as sent as an argument.
var request = getHTTPObject();
//doc.innerHTML += "<br/>grabFile(file, divx) fired ";
details = document.getElementById(divx);
if (request) {
request.onreadystatechange = function() {
parseResponse(request);
}
request.open("GET", file, true);
request.send(null);
}
}

function parseResponse(request) {
//doc.innerHTML += "<br/>parseResponse(request) fired " ;
if (request.readyState == 4) {
if (request.status == 200 || request.status == 304) {
//details = document.getElementById("sp1");
//alert(details);
details.innerHTML = request.responseText;
}
}
}

window.onload = function() {
details = document.getElementById("sp1");
details;
doc = document.getElementById("showLoad");
//doc.innerHTML = "";
//doc.innerHTML = "<br/> window.onload = function(): Fired";
// windows onload would have conflicted with others
//

}


Style Sheet main.css

/* this goes to the top */
#topdiv
{
position: absolute; width: 819px; height: 56px; z-index: 1; left: 277px; top: 18px; background-color:#6D768D;
}
/* Frontiersoft inc name */

#topbanner
{
position: absolute; width: 295px; height: 49px; z-index: 8; left: 674px; top: 0px; font-size:40px; color:#FFFFFF;
}
/* Float Frontiersoft Inc on the top*/
.p26
{
width:819px; height:40px; border:0; left:0px;top:18px;position: absolute;
}
.leftp4
{
width:131px; height:98px;
}
#layer2
{
position: absolute; width: 214px; height: 99px; z-index: 2; left: 276px; top: 86px;background-color:#6D768D;
}
#layer3
{
position: absolute; width: 592px; height: 100px; z-index: 3; left: 505px; top: 86px; background-color:#6D768D;
}
#layer4
{
position: absolute; width: 215px; height: 10px; z-index: 6; left: 276px; top: 198px; background-color:#6D768D;
}
/* table 1 constining tree menu */
.table1
{
position:absolute; width: 215px; height: 400px; z-index: 4; left: 276px; top: 203px; background-color:#6D768D;
}
/* division over ajax page load sp1 and sp1 is an DOM-ID can be any element */
#layer5
{
position: absolute; width: 594px; height:71%; z-index: 5; left: 507px; top: 199px; background-color:#FFFFFF;
}
#sp1 {
width :560px; background-color: white; left:520px; z-index: 8;
position:absolute; height:65%; overflow: auto;
padding-left:10px; top:230px;border: 2px solid #000080;
}
/* images*/
.imgtop
{
position: absolute; width: 819px; height: 8px; z-index: 1; left: 0px; top: 1px;
}
.imgcode1
{
width:593px; height:8px; top:0px; position:absolute; left:0px;
}
.imgcode2
{
}
.imgcode24
{
width:440px; height:65px;left:70px; position:absolute; top: 25px;
}
.imghandL
{
width:60px; height:65px;position:absolute; left:509px; top: 25px;
}
.imghandR
{
width:60px; height:65px;position:absolute; left:11px; top: 25px;
}
.style1
{
color: #FFFFFF;
}
.table1
{
position:absolute; width: 215px; height: 538px; z-index: 4; left: 276px; top: 203px; background-color:#6D768D;
}
/* toggling tree list */
ul.CollasingNodes, ul.CollasingNodes li, ul.CollasingNodes ul {
clear:both; margin: 0;padding: 0;list-style-type: none;font-size: 100%;
}

ul.CollasingNodes {
position: relative; cursor: default; width: 8.2em; margin: 2px 0 0 5px;
}

ul.CollasingNodes li {
position: relative;text-align: left;cursor: pointer;cursor: hand;width: 12.4em;
top: 0px;left: 0px;background-color:White;
}

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

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


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

ul.CollasingNodes a:hover, ul.CollasingNodes a:focus, ul.CollasingNodes a:active {
text-decoration: underline;
color: red;
}


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

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

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

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

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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<title>Frontiersoft Toggle: 3 C#</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="mQuery.js" type="text/javascript"></script>
</head>

<body bgcolor="#999999">
<span id="sp1">To browse this site, the client machine should support Javascript else visit our frame based documentation.
</span>
<div id="topdiv">
<p align="center">
<img border="0" src="images/left_content.gif" class="imgtop" /><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img border="0" src="images/with_p26.jpg" class="p26" alt="p26"/></div>
<div style="" id="layer2">
<img border="0" src="images/left_content.gif" width="214" height="8" alt="left_content"/><img border="0" src="images/with_p4.gif" class="leftp4" alt="p4.gif"/></div>
<div style="" id="layer3">
<p align="center">
<img border="0" src="images/left_content.gif" class="imgcode1"><br/>
<br>
<img border="0" src="images/rhand_p23.jpg" class="imghandR"/><img border="0" src="images/code_p24.jpg" class="imgcode24"/><img border="0" src="images/lhand_p25.jpg" class="imghandL"></div>
<div id="layer4">
<img border="0" src="images/left_content.gif" width="215" style="height: 9px"/></div>
<table border="0" cellpadding="2" class="table1">
<tr>
<td class="style1" style="text-align: center">
<img border="0" src="images/left_content.gif" style="height: 9px; width: 205px"/> </td>
</tr>
<tr>
<td class="style1" style="text-align: center">C# Code </td>
</tr>
<tr>
<td>
<ul id="ulNodes" class="CollasingNodes">

<!-- root 1 start here -->

<li><a href="../../../../../../Root.1.0/">Root 1.0: Home</a>
<ul>
<li><a href="#" onclick="grabFile('home/OurMission.aspx', 'sp1'); return false;">
Our Mission</a></li>
<li><a href="#" onclick="grabFile('home/What_WeDo.aspx', 'sp1'); return false;">
What We Do</a></li>
<li><a href="#"
onclick="grabFile('index_files/introduction/intro_1.htm', 'sp1'); return false;"">Intro-1
</a></li>
<li><a href="#"
onclick="grabFile('index_files/option_3.htm', 'sp1'); return false;">page_3</a></li>
<li><a href="#"
onclick="grabFile('index_files/option_4.htm', 'sp1'); return false;">page_4</a>
</li>
</ul>
</li>
<!-- root 1 ends here -->
<!-- root 2 start here -->
<li><a href="../../../../../../Root.2.0/">Root 2.0:Services</a>
<ul>
<li><a href="#"
onclick="grabFile('index_files/introduction/intro_1.htm', 'sp1'); return false;">Intro: 1</a></li>
<li><a href="#"
onclick="grabFile('index_files/option_2.htm', 'sp1'); return false;">page_2</a></li>
<li><a href="#"
onclick="grabFile('index_files/option_3.htm', 'sp1'); return false;">page_3</a></li>
<li><a href="#"
onclick="grabFile('index_files/option_4.htm', 'sp1'); return false;">page_4</a>
</li>
</ul>
</li>
<!-- root 2 ends here -->
<li><a href="../../../../../../Root.2.0/">Root 2.0:Services</a>
<ul>
<li><a href="#"
onclick="grabFile('index_files/introduction/intro_1.htm', 'sp1'); return false;">Intro: 1</a></li>
<li><a href="#"
onclick="grabFile('index_files/option_2.htm', 'sp1'); return false;">page_2</a></li>
<li><a href="#"
onclick="grabFile('index_files/option_3.htm', 'sp1'); return false;">page_3</a></li>
<li><a href="#"
onclick="grabFile('index_files/option_4.htm', 'sp1'); return false;">page_4</a>
</li>
</ul>
</li>
<!-- root 3 start here -->
<li><a href="../../../../../../Root.3.0/">Root 2.0:Academia</a>
<ul>
<li><a href="#"
onclick="grabFile('index_files/introduction/intro_1.htm', 'sp1'); return false;">Intro: 1</a></li>
<li><a href="#"
onclick="grabFile('index_files/option_2.htm', 'sp1'); return false;">page_2</a></li>
<li><a href="#"
onclick="grabFile('index_files/option_3.htm', 'sp1'); return false;">page_3</a></li>
<li><a href="#"
onclick="grabFile('index_files/option_4.htm', 'sp1'); return false;">page_4</a>
</li>
</ul>
</li>
<!-- root 3 ends here -->
</ul>
</td>
</tr>
<tr>
<td>
&nbsp;</td>
</tr>
</table>
<!-- layer 5 is -->
<div id="layer5">
<img border="0" src="images/left_content.gif" width="594" height="11"/>
</div>
<div id="topbanner">Frontiersoft Inc</div>
</body>
</html>

Step:3