Auto Expand menu list

**Dan4Dan** · 12-05-2009 07:28 PM

Hello everyone,
Please give me a hand.
I have a hierarchy list run by HTML, CSS and Javasript. I also have Expand All and Collapse All buttons.

Everytime the page is loaded, the list displays as a collapsing one. What should I have to have to get the list expanding automatically when the page is loaded?

Thank you very much for your help.

Below is the scripts

HTML code:

<a href="javascript: openMap();">Expand All</a>  |  <a href="javascript:closeMap();">Collapse All</a>
<ul id="sitemap">
<li><a href="#">First link</a>
<ul>
<li><a href="#">First link</a>
<ul>
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Third link</a></li>
<li><a href="#">Fourth link</a></li>
<li><a href="#">Fifth link</a></li>
</ul>
</li>
</ul>
</li>
</ul>

Below is Javascript file:

this.sitemapstyler = function(){
var sitemap = document.getElementById("sitemap")
if(sitemap){

this.listItem = function(li){
if(li.getElementsByTagName("ul").length > 0){
var ul = li.getElementsByTagName("ul")[0];
ul.style.display = "none";
var span = document.createElement("span");
span.className = "collapsed";
span.onclick = function(){
ul.style.display = (ul.style.display == "none") ? "block" : "none";
this.className = (ul.style.display == "none") ? "collapsed" : "expanded";
};
li.onkeydown = function(e){
var KeyID = (window.event) ? event.keyCode : e.keyCode;
switch(KeyID){
case 37: // left arrow key press
ul.style.display = "none";
span.className = "collapsed";
break;
case 39: // right arrow key press
ul.style.display = "block";
span.className = "expanded";
break;
}
};
li.appendChild(span);
};
};

var items = sitemap.getElementsByTagName("li");
for(var i=0;i<items.length;i++){
listItem(items[i]);
};

};
};

window.onload = sitemapstyler;

function openMap(){
var sitemap = document.getElementById("sitemap")
if(sitemap){

this.listItem = function(li){
if(li.getElementsByTagName("ul").length > 0){
var ul = li.getElementsByTagName("ul")[0];
ul.style.display = "block";
var span = document.createElement("span");
span.className = "expanded";
span.onclick = function(){
ul.style.display = (ul.style.display == "none") ? "block" : "none";
this.className = (ul.style.display == "none") ? "collapsed" : "expanded";
};
li.onkeydown = function(e){
var KeyID = (window.event) ? event.keyCode : e.keyCode;
switch(KeyID){
case 37:
ul.style.display = "none";
span.className = "collapsed";
break;
case 39:
ul.style.display = "block";
span.className = "expanded";
break;
}
};
li.appendChild(span);
};
};

var items = sitemap.getElementsByTagName("li");
for(var i=0;i<items.length;i++){
listItem(items[i]);
};

};
};

function closeMap(){
var sitemap = document.getElementById("sitemap")
if(sitemap){

this.listItem = function(li){
if(li.getElementsByTagName("ul").length > 0){
var ul = li.getElementsByTagName("ul")[0];
ul.style.display = "none";
var span = document.createElement("span");
span.className = "collapsed";
span.onclick = function(){
ul.style.display = (ul.style.display == "none") ? "block" : "none";
this.className = (ul.style.display == "none") ? "collapsed" : "expanded";
};
li.onkeydown = function(e){
var KeyID = (window.event) ? event.keyCode : e.keyCode;
switch(KeyID){
case 37:
ul.style.display = "none";
span.className = "collapsed";
break;
case 39:
ul.style.display = "block";
span.className = "expanded";
break;
}
};
li.appendChild(span);
};
};

var items = sitemap.getElementsByTagName("li");
for(var i=0;i<items.length;i++){
listItem(items[i]);
};

};
};

**justinbarneskin** · 12-07-2009 11:29 AM

Im not sure what you want but I'm almost sure you could cut down lines of code...

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD><TITLE>Mo7-12am58</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<STYLE type=text/CSS>

</STYLE>
<SCRIPT type="text/javascript">
function oc(x,y){ y=document.getElementById(y); var l=y.getElementsByTagName('li'); var u=y.getElementsByTagName('ul');
	var vh='hidden'; var it='Expand All'
	if(l[0].style.overflow=='hidden'){ vh='visible';it='Collapse All'}
	for(i=0;i<l.length;i++){l[i].style.overflow=vh}
	document.getElementById('ocm').innerHTML=it
}
</SCRIPT>
<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY scroll="auto">
<a id="ocm" href="javascript: oc(this,'sitemap');">Expand All</a>
<ul id="sitemap">
	<li style="height:20px;overflow:hidden"><a href="#">First link</a>
	<ul>
		<lis style="height:20px;overflow:hidden"><a href="#">First link</a>
			<ul>
				<li><a href="#">First link</a></li>
				<li><a href="#">Second link</a></li>
				<li><a href="#">Third link</a></li>
				<li><a href="#">Fourth link</a></li>
				<li><a href="#">Fifth link</a></li>
			</ul>
		</li>
	</ul>
	</li>
</ul>

</BODY></HTML>

Thread: Auto Expand menu list

Thread Tools

Display

Auto Expand menu list

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions