rewrote and improved HTML for TOC

Attention: Template authors need to adjust their CSS!

Original structure:
div.toc >
  div#toc__header.tocheader.toctoggle > span#toc__toggle.toc_close|toc_open > span
  div#toc__inside > ul.toc > li.level1 > div.li > span.li > a.toc

New structure:
div#dw__toc.open|close >
  h3 > strong > span
  ul.toc > li.toc > div.li > a

7 files changed, 64 insertions, 63 deletions

diff --git a/lib/scripts/page.js b/lib/scripts/page.js
index 5da4a9cc0..6e7d7faf7 100644
--- a/lib/scripts/page.js
+++ b/lib/scripts/page.js
@@ -96,26 +96,26 @@ dw_page = {
      * Adds the toggle switch to the TOC
      */
     initTocToggle: function() {
-        var $header, $clicky, $toc, $tocul, setClicky;
-        $header = jQuery('#toc__header');
+        var $wrapper, $header, $clicky, $toc, $tocul, setClicky;
+        $wrapper = jQuery('#dw__toc');
+        $header = jQuery('h3', $wrapper);
         if(!$header.length) {
             return;
         }
-        $toc = jQuery('#toc__inside');
-        $tocul = $toc.children('ul.toc');
+        $toc = jQuery('div', $wrapper).first();
+        $tocul = jQuery('ul', $toc);
 
         setClicky = function(hiding){
             if(hiding){
                 $clicky.html('<span>+</span>');
-                $clicky[0].className = 'toc_open';
+                $wrapper.addClass('close').removeClass('open');
             }else{
                 $clicky.html('<span>&minus;</span>');
-                $clicky[0].className = 'toc_close';
+                $wrapper.addClass('open').removeClass('close');
             }
         };
 
-        $clicky = jQuery(document.createElement('span'))
-                        .attr('id','toc__toggle');
+        $clicky = jQuery(document.createElement('strong'));
         $header.css('cursor','pointer')
                .click(function () {
                     var hidden;
diff --git a/lib/tpl/default/design.css b/lib/tpl/default/design.css
index 9d2cc1844..48438527e 100644
--- a/lib/tpl/default/design.css
+++ b/lib/tpl/default/design.css
@@ -547,7 +547,7 @@ div.dokuwiki table.inline td {
 
 /* ---------- table of contents ------------------- */
 
-div.dokuwiki div.toc {
+div.dokuwiki #dw__toc {
   margin: 1.2em 0 0 2em;
   float: right;
   width: 200px;
@@ -555,46 +555,45 @@ div.dokuwiki div.toc {
   clear: both;
 }
 
-div.dokuwiki div.tocheader {
+div.dokuwiki #dw__toc h3 {
   border: 1px solid __border__;
   background-color: __background_alt__;
   text-align: left;
   font-weight: bold;
   padding: 3px;
-  margin-bottom: 2px;
+  margin: 0 0 2px 0;
+  font-size: 1em;
 }
 
-div.dokuwiki span.toc_open,
-div.dokuwiki span.toc_close {
+div.dokuwiki #dw__toc h3 strong {
     border: 0.4em solid __background_alt__;
     float: right;
     display: block;
     margin: 0.4em 3px 0 0;
 }
 
-div.dokuwiki span.toc_open span,
-div.dokuwiki span.toc_close span {
+div.dokuwiki #dw__toc h3 strong span {
     display: none;
 }
 
-div.dokuwiki span.toc_open {
+div.dokuwiki #dw__toc.close h3 strong {
     margin-top: 0.4em;
     border-top: 0.4em solid __text__;
 }
 
-div.dokuwiki span.toc_close {
+div.dokuwiki #dw__toc.open h3 strong {
     margin-top: 0;
     border-bottom: 0.4em solid __text__;
 }
 
-div.dokuwiki #toc__inside {
+div.dokuwiki #dw__toc > div {
   border: 1px solid __border__;
   background-color: __background__;
   text-align: left;
   padding: 0.5em 0 0.7em 0;
 }
 
-div.dokuwiki ul.toc {
+div.dokuwiki #dw__toc ul {
   list-style-type: none;
   list-style-image: none;
   line-height: 1.2em;
@@ -602,23 +601,23 @@ div.dokuwiki ul.toc {
   margin: 0;
 }
 
-div.dokuwiki ul.toc li {
+div.dokuwiki #dw__toc ul li {
   background: transparent url(images/tocdot2.gif) 0 0.6em no-repeat;
   padding-left: 0.4em;
 }
 
-div.dokuwiki ul.toc li.clear {
+div.dokuwiki #dw__toc ul li.clear {
   background-image: none;
   padding-left: 0.4em;
 }
 
-div.dokuwiki a.toc:link,
-div.dokuwiki a.toc:visited {
+div.dokuwiki #dw__toc a:link,
+div.dokuwiki #dw__toc a:visited {
   color: __extern__;
 }
 
-div.dokuwiki a.toc:hover,
-div.dokuwiki a.toc:active {
+div.dokuwiki #dw__toc a:hover,
+div.dokuwiki #dw__toc a:active {
   color: __text__;
 }
 
diff --git a/lib/tpl/default/print.css b/lib/tpl/default/print.css
index 4387dc4bf..f83e8c97c 100644
--- a/lib/tpl/default/print.css
+++ b/lib/tpl/default/print.css
@@ -224,5 +224,5 @@ table.inline td {
   border: 1px solid #000000;
 }
 
-.toc, .footerinc, .header, .bar, .user { display: none; }
+#dw__toc, .footerinc, .header, .bar, .user { display: none; }
 
diff --git a/lib/tpl/default/rtl.css b/lib/tpl/default/rtl.css
index 82c85839b..32a8ddb6d 100644
--- a/lib/tpl/default/rtl.css
+++ b/lib/tpl/default/rtl.css
@@ -89,30 +89,36 @@ div.dokuwiki div.level4 { margin-left: 0px; margin-right: 63px; }
 div.dokuwiki div.level5 { margin-left: 0px; margin-right: 83px; }
 
 /* TOC control */
-div.dokuwiki div.toc {
+div.dokuwiki #dw__toc {
   float: left;
+  margin: 1.2em 2em 0 0;
 }
 
-div.dokuwiki div.tocheader {
+div.dokuwiki #dw__toc h3 {
   text-align: right;
 }
 
-div.dokuwiki #toc__inside {
+div.dokuwiki #dw__toc h3 strong {
+    float: left;
+    margin: 0.4em 0 0 3px;
+}
+
+div.dokuwiki #dw__toc > div {
   text-align: right;
 }
 
-div.dokuwiki ul.toc {
+div.dokuwiki #dw__toc ul {
   padding: 0;
   padding-right: 1em;
 }
 
-div.dokuwiki ul.toc li {
+div.dokuwiki #dw__toc ul li {
   background-position: right 0.6em;
   padding-right: 0.4em;
   direction: rtl;
 }
 
-div.dokuwiki ul.toc li.clear {
+div.dokuwiki #dw__toc ul li.clear {
   padding-right: 0.4em;
 }
 
diff --git a/lib/tpl/dokuwiki/css/_toc.css b/lib/tpl/dokuwiki/css/_toc.css
index f89bce6c1..e62bb0a7a 100644
--- a/lib/tpl/dokuwiki/css/_toc.css
+++ b/lib/tpl/dokuwiki/css/_toc.css
@@ -7,68 +7,66 @@
 ********************************************************************/
 
 /* toc container */
-.dokuwiki div.toc {
+#dw__toc {
     float: right;
     margin: 0 0 1.4em 1.4em;
     width: 12em;
     background-color: __background_alt__;
     color: inherit;
 }
-[dir=rtl] .dokuwiki div.toc {
+[dir=rtl] #dw__toc {
     float: left;
     margin: 0 1.4em 1.4em 0;
 }
 
 /*____________ toc header ____________*/
 
-.dokuwiki div.tocheader {
+#dw__toc h3 {
     padding: .2em .5em;
     font-weight: bold;
 }
 
-.dokuwiki .toc span.toc_open,
-.dokuwiki .toc span.toc_close {
+#dw__toc h3 strong {
     float: right;
     margin: 0 .2em;
 }
-[dir=rtl] .dokuwiki .toc span.toc_open,
-[dir=rtl] .dokuwiki .toc span.toc_close {
+[dir=rtl] #dw__toc h3 strong {
     float: left;
 }
 
 /*____________ toc list ____________*/
 
-.dokuwiki #toc__inside {
+#dw__toc > div {
     padding: .2em .5em;
 }
-.dokuwiki #toc__inside ul {
+#dw__toc ul {
     padding: 0;
     margin: 0;
 }
-.dokuwiki #toc__inside ul li {
+#dw__toc ul li {
     list-style: none;
     padding: 0;
     margin: 0;
     line-height: 1.1;
 }
-.dokuwiki #toc__inside ul li div.li {
+#dw__toc ul li div.li {
     padding: .15em 0;
 }
-.dokuwiki #toc__inside ul ul {
+#dw__toc ul ul {
     padding-left: 1em;
 }
-[dir=rtl] .dokuwiki #toc__inside ul ul {
+[dir=rtl] #dw__toc ul ul {
     padding-left: 0;
     padding-right: 1em;
 }
-.dokuwiki #toc__inside ul ul li {
+#dw__toc ul ul li {
 }
-.dokuwiki #toc__inside ul li a {
+#dw__toc ul li a {
 }
 
 /* in case of toc list jumping one level
   (e.g. if heading level 3 follows directly after heading level 1) */
-.dokuwiki #toc__inside ul li.clear {
+#dw__toc ul li.clear {
 }
 
 
diff --git a/lib/tpl/dokuwiki/css/design.css b/lib/tpl/dokuwiki/css/design.css
index f73985ed7..8ebeca6da 100644
--- a/lib/tpl/dokuwiki/css/design.css
+++ b/lib/tpl/dokuwiki/css/design.css
@@ -392,60 +392,58 @@
 
 /*____________ changes to _toc ____________*/
 
-.dokuwiki div.toc {
+#dw__toc {
     margin:  -2em -2em .5em 1.4em;
     width: __sidebar_width__;
     border-left: 1px solid __border__;
     background: __background__;
     color: inherit;
 }
-[dir=rtl] .dokuwiki div.toc {
+[dir=rtl] #dw__toc {
     margin: -2em 1.4em .5em -2em;
     border-left-width: 0;
     border-right: 1px solid __border__;
 }
 
-.dokuwiki div.tocheader {
+#dw__toc h3 {
     padding: .5em 1em;
     margin-bottom: 0;
     font-size: .875em;
     letter-spacing: .1em;
 }
 
-.dokuwiki .toc span.toc_open,
-.dokuwiki .toc span.toc_close {
+#dw__toc h3 strong {
     background: transparent url(images/toc-arrows.png) 0 0;
     width: 8px;
     height: 5px;
     margin: .4em 0 0;
 }
-.dokuwiki .toc span.toc_open {
+#dw__toc.close strong {
     background-position: 0 -5px;
 }
 
-.dokuwiki .toc span.toc_open span,
-.dokuwiki .toc span.toc_close span {
+#dw__toc strong span {
     display: none;
 }
 
 
-.dokuwiki #toc__inside {
+#dw__toc > div {
     font-size: 0.875em;
     padding: .5em 1em 1em;
 }
-.dokuwiki #toc__inside ul {
+#dw__toc ul {
     padding: 0 0 0 1.2em;
 }
-[dir=rtl] .dokuwiki #toc__inside ul {
+[dir=rtl] #dw__toc ul {
     padding: 0 1.5em 0 0;
 }
-.dokuwiki #toc__inside ul li {
+#dw__toc ul li {
     list-style-image: url(images/toc-bullet.png);
 }
-.dokuwiki #toc__inside ul li.clear {
+#dw__toc ul li.clear {
     list-style: none;
 }
-.dokuwiki #toc__inside ul li div.li {
+#dw__toc ul li div.li {
     padding: .2em 0;
 }
 
diff --git a/lib/tpl/dokuwiki/css/print.css b/lib/tpl/dokuwiki/css/print.css
index f4f81d741..f6bf64dd9 100644
--- a/lib/tpl/dokuwiki/css/print.css
+++ b/lib/tpl/dokuwiki/css/print.css
@@ -21,7 +21,7 @@ div.error,
 #dokuwiki__header .tools,
 #dokuwiki__aside,
 .dokuwiki .breadcrumbs,
-.dokuwiki .toc,
+#dw__toc,
 .dokuwiki .secedit,
 #dokuwiki__pagetools,
 #dokuwiki__footer {