1 files changed, 37 insertions, 20 deletions

diff --git a/lib/scripts/page.js b/lib/scripts/page.js
index 6e7d7faf7..84af1f18b 100644
--- a/lib/scripts/page.js
+++ b/lib/scripts/page.js
@@ -10,7 +10,7 @@ dw_page = {
     init: function(){
         dw_page.sectionHighlight();
         jQuery('a.fn_top').mouseover(dw_page.footnoteDisplay);
-        dw_page.initTocToggle();
+        dw_page.makeToggle('#dw__toc h3','#dw__toc > div');
     },
 
     /**
@@ -93,47 +93,64 @@ dw_page = {
     },
 
     /**
-     * Adds the toggle switch to the TOC
+     * Makes an element foldable by clicking its handle
+     *
+     * This is used for the TOC toggling, but can be used for other elements
+     * as well. A state indicator is inserted into the handle and can be styled
+     * by CSS.
+     *
+     * @param selector handle What should be clicked to toggle
+     * @param selector content This element will be toggled
      */
-    initTocToggle: function() {
-        var $wrapper, $header, $clicky, $toc, $tocul, setClicky;
-        $wrapper = jQuery('#dw__toc');
-        $header = jQuery('h3', $wrapper);
-        if(!$header.length) {
-            return;
-        }
-        $toc = jQuery('div', $wrapper).first();
-        $tocul = jQuery('ul', $toc);
+    makeToggle: function(handle, content){
+        var $handle, $content, $clicky, $child, setClicky;
+        $handle = jQuery(handle);
+        if(!$handle.length) return;
+        $content = jQuery(content);
+        if(!$content.length) return;
+
+        // we animate the children
+        $child = $content.children();
 
+        // class/display toggling
         setClicky = function(hiding){
             if(hiding){
                 $clicky.html('<span>+</span>');
-                $wrapper.addClass('close').removeClass('open');
+                $handle.addClass('toggle_open');
+                $handle.removeClass('toggle_close');
             }else{
                 $clicky.html('<span>&minus;</span>');
-                $wrapper.addClass('open').removeClass('close');
+                $handle.addClass('toggle_close');
+                $handle.removeClass('toggle_open');
             }
         };
 
-        $clicky = jQuery(document.createElement('strong'));
-        $header.css('cursor','pointer')
+        // the state indicator
+        $clicky = jQuery(document.createElement('strong'))
+                        .addClass('toggle');
+
+        // click function
+        $handle.css('cursor','pointer')
                .click(function () {
                     var hidden;
 
-                    // Assert that $toc instantly takes the whole TOC space
-                    $toc.css('height', $toc.height()).show();
+                    // Assert that content instantly takes the whole space
+                    $content.css('height', $content.height()).show();
 
-                    hidden = $tocul.stop(true, true).is(':hidden');
+                    // stop any running animation and get current state
+                    hidden = $child.stop(true, true).is(':hidden');
 
+                    // update the state
                     setClicky(!hidden);
 
                     // Start animation and assure that $toc is hidden/visible
-                    $tocul.dw_toggle(hidden, function () {
-                        $toc.toggle(hidden);
+                    $child.dw_toggle(hidden, function () {
+                        $content.toggle(hidden);
                     });
                 })
                .prepend($clicky);
 
+        // initial state
         setClicky();
     }
 };