Archive for July, 2010

Javascript List Menu Collapse

Wednesday, July 21st, 2010

Mu plugin that collapses pages and categories has been approved and is now in the repository.

Collapse Page and Category Plugin

The heart is a script that makes collapsing menus dead simple. You just give the UL that you would like to have collapsed the class of ‘children’. It will then hide that UL and attach a click event to its parent tag. Making nested collapsing menus will never get easier.

Here is the JavaScript code – you can add it to any page, not just WordPress.

function kpg_colpage_context(event) {
 var ev=event||window.event;
 if(ev.stopPropagation) {ev.stopPropagation();}
 ev.cancelBubble = true;

 var targ=ev.srcElement||ev.target;
 var nodes=targ.childNodes;
 for (var i = 0; i < nodes.length; i++) {
 if (nodes[i].className=="children") {
 if (nodes[i].style.display=="none") {
 nodes[i].style.display="block";
 nodes[i].style.visibility="visible";
 } else {
 nodes[i].style.visibilty="hidden";
 nodes[i].style.display="none";
 }
 }
 }
 return false;
 }
 function kpg_colpage_action(event) {
 //try {
 var b=document.getElementsByTagName("UL"); // case sensitive XML
 for (var i=0;i<b.length;i++) {
 // make parent clickable and the child no display
 if (b[i].className=="children") {
 // search for parent li - check a few times incase the ul tags are heavily formatted
 var p=b[i].parentNode.parentNode;
 b[i].style.visibilty="hidden";
 b[i].style.display="none";
 p.onclick=function(event) { return kpg_colpage_context(event);}
 }
 }
 //} catch (ee) {}
 }
 // set the onload event
 if (document.addEventListener) {
 document.addEventListener("DOMContentLoaded", function(event) { kpg_colpage_action(event); }, false);
 } else if (window.attachEvent) {
 window.attachEvent("onload", function(event) { kpg_colpage_action(event); });
 } else {
 var oldFunc = window.onload;
 window.onload = function() {
 if (oldFunc) {
 oldFunc();
 }
 kpg_colpage_action('load');
 };
 }