1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
| 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]);
buttons(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.buttons = function(list){
var parent = list.parentNode;
var p = document.createElement("p");
p.className = listClass;
var a = document.createElement("a");
a.innerHTML = expandText;
a.onclick = function(){expand(list)};
p.appendChild(a);
var a = document.createElement("a");
a.innerHTML = collapseText;
a.onclick = function(){collapse(list)};
p.appendChild(a);
parent.insertBefore(p,list);
};
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; |
Partager