www.webdeveloper.com
Results 1 to 2 of 2

Thread: Auto Expand menu list

  1. #1
    Join Date
    Dec 2009
    Posts
    1

    Auto Expand menu list

    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>&nbsp; |&nbsp; <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]);
    };

    };
    };

  2. #2
    Join Date
    Oct 2006
    Posts
    939
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles