MediaWiki:Navigation.js

// Faster Dynamic Navigation
 
 // set up the words in your language
 var NavigationBarHide = '▲';
 var NavigationBarShow = '▼';
 
 var NavigationTitleHide = 'hide contents';
 var NavigationTitleShow = 'show contents';
 
 function collapseTable(e)
 {
   e = e || window.event;
   var target = e.target || e.srcElement;
   var table, NavToggle = target;
   
   if ( !$(NavToggle).hasClass('navigation') ) {
     while (NavToggle && NavToggle.nodeName != "TH")
       NavToggle = NavToggle.parentNode;
     if (NavToggle && NavToggle.lastChild && $(NavToggle.lastChild).hasClass('navigation'))
       NavToggle = NavToggle.lastChild;
     else
       return;
   }
   
   table = NavToggle.parentNode;
   while (table && !$(table).hasClass('collapsible'))
       table = table.parentNode;
   if (!table)
     return;
   
   var rows = table.getElementsByTagName( "tr" ); 
   
   if (NavToggle.firstChild.data == NavigationBarHide) {
     for ( var i = 1; i < rows.length; i++ ) {
       rows[i].style.display = "none";
     }
     NavToggle.firstChild.data = NavigationBarShow;
     NavToggle.parentNode.setAttribute('title', NavigationTitleShow);
   } else if (NavToggle.firstChild.data == NavigationBarShow) {
     for ( var i = 1; i < rows.length; i++ ) {
       rows[i].style.display = rows[0].style.display;
     }
     NavToggle.firstChild.data = NavigationBarHide;
     NavToggle.parentNode.setAttribute('title', NavigationTitleHide);
   }
 }
 
 function createCollapseButtons()
 {
   var tables = document.getElementsByTagName( "table" ), NavToggle, NavToggleText, NavHead;
   
   for ( var i = 0; i < tables.length; i++ ) {
     if ( !$(tables[i]).hasClass("collapsible" ) )
       continue;
     
     NavHead = tables[i].getElementsByTagName("th");
     /* only add button if there is a header row to work with */
     if (NavHead) {
       NavToggle = document.createElement( "a" );
       NavToggleText = document.createTextNode($(tables[i]).hasClass("selected") ? NavigationBarShow : NavigationBarHide);
       NavToggle.setAttribute("class", "navigation");
       NavToggle.appendChild( NavToggleText );
       
       NavHead[0].appendChild(NavToggle);
       NavHead[0].onclick = collapseTable;
       
       // only bother to emulate click if if toggle button was added
       if (document.createEvent) { // DOM 2 and DOM 3 compliant browsers
         var e = document.createEvent("MouseEvents");
         e.initMouseEvent("click", true,true, window, 0,0,0,0,0, false,false,false,false, 0, null);
         NavHead[0].dispatchEvent(e);
       } else if (NavHead[0].fireEvent) { // IE
         NavHead[0].fireEvent("onclick");
       }
     }
   }
 }
 
 // shows and hides content and picture (if available) of navigation bars
 function toggleNavigationBar(e)
 {
   e = e || window.event;
   var target = e.target || e.srcElement;
   var NavFrame, NavToggle = target;
   
   if ( !$(NavToggle).hasClass('navigation') ) {
     while (NavToggle && !$(NavToggle).hasClass('NavHead') && !$(NavToggle).hasClass('title'))
       NavToggle = NavToggle.parentNode;
     if (NavToggle && NavToggle.lastChild && $(NavToggle.lastChild).hasClass('navigation'))
       NavToggle = NavToggle.lastChild;
     else
       return;
   }
   
   NavFrame = NavToggle.parentNode;
   while (NavFrame && !$(NavFrame).hasClass('NavFrame') && !$(NavFrame).hasClass('collapsible'))
       NavFrame = NavFrame.parentNode;
   if (!NavFrame)
     return;
   
   if (NavToggle.firstChild.data == NavigationBarHide) {
     for (var NavChild=NavFrame.firstChild; NavChild != null; NavChild=NavChild.nextSibling) {
       if ($(NavChild).hasClass('NavContent') || $(NavChild).hasClass('NavPic'))
         NavChild.style.display = 'none';
     }
     NavToggle.firstChild.data = NavigationBarShow;
     NavToggle.parentNode.setAttribute('title', NavigationTitleShow);
   } else if (NavToggle.firstChild.data == NavigationBarShow) {
     for (var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling) {
       if ($(NavChild).hasClass('NavContent') || $(NavChild).hasClass('NavPic'))
         NavChild.style.display = 'block';
     }
     NavToggle.firstChild.data = NavigationBarHide;
     NavToggle.parentNode.setAttribute('title', NavigationTitleHide);
   }
 }
 
 // adds show/hide-button to navigation bars
 function createNavigationBarToggleButton()
 {
   // iterate over all div elements
   var NavFrame=document.getElementsByTagName("div");
   
   for (var i=0; i < NavFrame.length; i++)
   {
     if ( !$(NavFrame[i]).hasClass("NavFrame") && !$(NavFrame[i]).hasClass("collapsible") )
       continue;
     
     var NavToggle = document.createElement("a");
     var NavToggleText = document.createTextNode($(NavFrame[i]).hasClass("selected") ? NavigationBarShow : NavigationBarHide);
     
     NavToggle.className = 'navigation';
     NavToggle.appendChild(NavToggleText);
     
     // add NavToggle-Button as element inside of NavHead
     for (var j=0; j < NavFrame[i].childNodes.length; j++) {
       var NavHead = NavFrame[i].childNodes[j];
       
       if (!$(NavHead).hasClass("NavHead") && !$(NavHead).hasClass("title"))
         continue;
       NavHead.appendChild(NavToggle);
       NavHead.onclick = toggleNavigationBar;
       
       // only bother to emulate click if if toggle button was added
       if (document.createEvent) { // DOM 2 and DOM 3 compliant browsers
         var e = document.createEvent("MouseEvents");
         e.initMouseEvent("click", true,true, window, 0,0,0,0,0, false,false,false,false, 0, null);
         NavHead.dispatchEvent(e);
       } else if (NavHead.fireEvent) { // IE
         NavHead.fireEvent("onclick");
       }
       break;
     }
   }
 }

$( createCollapseButtons );
$( createNavigationBarToggleButton );