Any Javascript brain box's about?

[Deleted User 234324]

Been pulling my hair out over a script used to expand unordered lists but my knowledge of js is pretty much non existant and i would like to modify it some how so that on initially viewing the page 3-4 list items are show by default and clicking on expand will show the rest of them.

Now the code itself has an option to show sub category levels ie.

Category Header 1

Category Header 2

Category Header 3

​

Clicking on expand will then reveal all the sub categories for the above 3 headers.

What im attempting to do is have it show by default

Category Header 1

Sub Category 1
Sub Category 2
Sub Category 3
Sub Category 4
View More...

Category Header 2

Sub Category 1
Sub Category 2
Sub Category 3
Sub Category 4
View More...

​

Any help would be greately appreciated.

Here is the JS code currently used, its freeware so freely available and can be altered.

/* 

    List Expander 
    written by Alen Grakalic, provided by Css Globe (cssglobe.com)
    
*/

this.listexpander = function(){
    
    // edit 
    
    var expandTo = 1; // level up to which you want your lists to be initially expanded. 1 is minimum
    var listClass = "listexpander" // class name that you want to assign to list(s). If you wish to change it make sure to update the css file as well  
    
    // end edit (do not edit below this line)
    
    this.start = function(){
        var ul = document.getElementsByTagName("ul");
        for (var i=0;i<ul.length;i++){
            if(ul[i].className == listClass){
                create(ul[i]);
            };
        };
    };

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

    this.listItem = function(li){
        if(li.getElementsByTagName("ul").length > 0){
            var ul = li.getElementsByTagName("ul")[0];
            ul.style.display = (depth(ul) <= expandTo) ? "block" : "none";
            li.className = (depth(ul) <= expandTo) ? "expanded" : "collapsed";
            li.over = true;    
            ul.onmouseover = function(){li.over = false;} 
            ul.onmouseout = function(){li.over = true;} 
            li.onclick = function(){
                if(this.over){
                    ul.style.display = (ul.style.display == "none") ? "block" : "none";
                    this.className = (ul.style.display == "none") ? "collapsed" : "expanded";                
                };
            };
        };        
    };    
    
    this.expand = function(list){
        li = list.getElementsByTagName("li");
        for(var i=0;i<li.length;i++){
            if(li[i].getElementsByTagName("ul").length > 0){
                var ul = li[i].getElementsByTagName("ul")[0];
                ul.style.display = "block";
                li[i].className = "expanded";
            };
        };
    };
    
    this.collapse = function(list){
        li = list.getElementsByTagName("li");
        for(var i=0;i<li.length;i++){
            if(li[i].getElementsByTagName("ul").length > 0){
                var ul = li[i].getElementsByTagName("ul")[0];
                ul.style.display = "none";
                li[i].className = "collapsed";
            };
        };
    };
    
    this.depth = function(obj){
        var level = 1;
        while(obj.parentNode.className != listClass){
            if (obj.tagName == "UL") level++;
            obj = obj.parentNode;
        };
        return level;
    };    
    
    start();
    
};

window.onload = listexpander;

http://cssglobe.com/post.asp?id=940

 

[suarve]

Not if this is exactly what you want, but its definately a good start. Its a JQuery plugin called 'collapsorz'

See http://jquery.kuzemchak.net/collapsorz.php

 

[Deleted User 234324]

Excellent, exactly what I was after, will have a go at integrating it tomorrow, much appreciated suarve.

 

[Randomface74]

I would start by trying to replace:

    this.listItem = function(li){
        if(li.getElementsByTagName("ul").length > 0){
            var ul = li.getElementsByTagName("ul")[0];
            ul.style.display = (depth(ul) <= expandTo) ? "block" : "none";
            li.className = (depth(ul) <= expandTo) ? "expanded" : "collapsed";
            li.over = true;    
            ul.onmouseover = function(){li.over = false;} 
            ul.onmouseout = function(){li.over = true;} 
            li.onclick = function(){
                if(this.over){
                    ul.style.display = (ul.style.display == "none") ? "block" : "none";
                    this.className = (ul.style.display == "none") ? "collapsed" : "expanded";                
                };
            };
        };        
    };

with:

    this.listItem = function(li){
        if(li.getElementsByTagName("ul").length > 0){
            var ul = li.getElementsByTagName("ul")[0];
            // ul.style.display = (depth(ul) <= expandTo) ? "block" : "none";
            // li.className = (depth(ul) <= expandTo) ? "expanded" : "collapsed";
            ul.style.display = (depth(ul) <= expandTo) ? "none" : "block";
            li.className = (depth(ul) <= expandTo) ? "collapsed" : "expanded";
            li.over = true;    
            ul.onmouseover = function(){li.over = false;} 
            ul.onmouseout = function(){li.over = true;} 
            li.onclick = function(){
                if(this.over){
                    // ul.style.display = (ul.style.display == "none") ? "block" : "none";
                    // this.className = (ul.style.display == "none") ? "collapsed" : "expanded";                
                    ul.style.display = (ul.style.display == "block") ? "none" : "block";
                    this.className = (ul.style.display == "block") ? "expanded" : "collapsed";        
                };
            };
        };        
    };

 

[_TubbZ_]

Stuff like this has been done a thousand times and more before, I personally take tried and tested code off the net as much as possible. Its usually more robust and quicker than writing it myself.