MediaWiki:Collapsible.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
 // Faster collapsible navigation boxes
 
 // 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 ( !hasClass(NavToggle, 'NavToggle') ) {
     while (NavToggle && NavToggle.nodeName != "TH")
       NavToggle = NavToggle.parentNode;
     if (NavToggle && NavToggle.lastChild && hasClass(NavToggle.lastChild, 'NavToggle'))
       NavToggle = NavToggle.lastChild;
     else
       return;
   }
   
   table = NavToggle.parentNode;
   while (table && !hasClass(table, '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 ( !hasClass( tables[i], "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(hasClass(tables[i], "selected") ? NavigationBarShow : NavigationBarHide);
       NavToggle.setAttribute("class", "NavToggle");
       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 ( !hasClass(NavToggle, 'NavToggle') ) {
     while (NavToggle && !hasClass(NavToggle, 'NavHead') && !hasClass(NavToggle, 'title'))
       NavToggle = NavToggle.parentNode;
     if (NavToggle && NavToggle.lastChild && hasClass(NavToggle.lastChild, 'NavToggle'))
       NavToggle = NavToggle.lastChild;
     else
       return;
   }
   
   NavFrame = NavToggle.parentNode;
   while (NavFrame && !hasClass(NavFrame, 'NavFrame') && !hasClass(NavFrame, 'collapsible'))
       NavFrame = NavFrame.parentNode;
   if (!NavFrame)
     return;
   
   if (NavToggle.firstChild.data == NavigationBarHide) {
     for (var NavChild=NavFrame.firstChild; NavChild != null; NavChild=NavChild.nextSibling) {
       if (hasClass(NavChild, 'NavContent') || hasClass(NavChild, '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 (hasClass(NavChild, 'NavContent') || hasClass(NavChild, '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 ( !hasClass(NavFrame[i], "NavFrame") && !hasClass(NavFrame[i], "collapsible") )
       continue;
     
     var NavToggle = document.createElement("a");
     var NavToggleText = document.createTextNode(hasClass(NavFrame[i], "selected") ? NavigationBarShow : NavigationBarHide);
     
     NavToggle.className = 'NavToggle';
     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 (!hasClass(NavHead, "NavHead") && !hasClass(NavHead, "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;
     }
   }
 }

 $(document).ready( createCollapseButtons );
 $(document).ready( createNavigationBarToggleButton );