TOC is now (un)foldable). Extra validation info

- new div.ah-toc-title containing the TOC title
- new div.ah-toggle containing the toggler for TOC folding
- JSlint settings included in source
- Valid CSS 2.1 (@charset, not @CHARSET)

ah_toc.css

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 /**
  * @file
  * TOC styles for advanced_help
@@ -9,15 +11,6 @@
  * $Id$
  */
 
-@CHARSET "UTF-8";
-
-div.ah-toc {
-  border: thin solid silver;
-  float: right;
-  margin-left: 1em;
-  margin-bottom: 0.5em;
-  padding: 0;
-}
 
 /**
  * Avoid having the TOC run into preformatted blocks if the initial block of
@@ -29,9 +22,12 @@ div.advanced-help-topic code, div.advanced-help-topic pre {
   clear: right; 
 }
 
-div.ah-toc ul {
-  list-style-type: none;
-  margin: 0.5em;
+div.ah-toc {
+  border: thin solid silver;
+  float: right;
+  margin-left: 1em;
+  margin-bottom: 0.5em;
+  padding: 0;
 }
 
 div.ah-toc * {
@@ -41,6 +37,26 @@ div.ah-toc * {
   background: none; /* remove excess list formatting from themes like garland */
 }
 
+div.ah-toc div.ah-toc-title {
+  border-bottom: solid thin silver;
+  padding: 0.5em;
+  text-align: center;
+  font-weight: bold;
+}
+
+div.ah-toc .ah-toggle {
+  float: right;
+  font-size: smaller;
+  font-weight: normal;
+  margin-left: 1em;
+  display: inline-block;
+}
+
+div.ah-toc ul {
+  list-style-type: none;
+  margin: 0.5em;
+}
+
 /**
  * h2 is not present in a normal page hierarchy.
  * Therefore h3 is at the first indent level too.
@@ -52,7 +68,3 @@ div.ah-toc * {
 .ah-toc .h6 { margin-left: 3em; }
 .ah-toc .h7 { margin-left: 4em; }
 
-.ah-toc center { 
-   border-bottom: solid thin silver;
-   padding: 0.5em; 
-}

ah_toc.js

@@ -8,6 +8,32 @@
  * @license Licensed under the General Public License version 2 and later.
  */
 
+/*jslint white: true, onevar: true, undef: true, nomen: true, eqeqeq: true, 
+ plusplus: true, bitwise: true, regexp: true, newcap: true, immed: true, 
+ indent: 2 */
+/*global $*/
+
+/**
+ * Provide an appropriate toggle message depending on TOC display state
+ * 
+ * @return string
+ */
+function ahToggleGetText(state) {
+  return state ? '[ + ]' : '[ - ]';
+}
+
+/**
+ * Toggle the state of the headings list and the label of the toggle text.
+ * 
+ * @return void
+ */
+function ahTocToggle() {
+  var display = $('.ah-toc ul').css('display');
+  
+  $('.ah-toc .ah-toggle').text(ahToggleGetText(display !== 'none')); 
+  $('.ah-toc ul').toggle(100);  
+}
+
 /**
  * Build a TOC div from the Hn elements in a given context
  * 
@@ -43,7 +69,7 @@ function ahTocBuildToc() {
   list = "<ul>\n";
   index = 0;
   
-  elements.each(function() {
+  elements.each(function () {
     element = $(this);
     id = element.attr('id');
     if (id === '') {
@@ -61,9 +87,11 @@ function ahTocBuildToc() {
   $('div.ah-toc', context).remove(); 
   
   // @TODO use a theme function
-  context.prepend('<div class="ah-toc"><center>Contents</center></div>');
+  context.prepend('<div class="ah-toc"><div class="ah-toc-title">Contents</div></div>');
   $('div.ah-toc').append(list);
-  return elements;
+  $('<span class="ah-toggle">' + ahToggleGetText(false) + 
+    '</span>').appendTo($('div.ah-toc-title')).click(ahTocToggle);
 }
 
 $(ahTocBuildToc);
+