Table des matières repliée par défaut

Par défaut, lorsque l'on arrive sur une page de DokuWiki, la table des matières est dépliée. Nous allons voir comment inverser ce comportement : le contenu de la table des matières sera alors invisible au chargement de la page et c'est l'utilisateur qui devra cliquer sur le lien Table des matières pour afficher son contenu, s'il le désire.

1. Dans le fichier CSS du template, chercher

   div.dokuwiki #toc__inside {
   	border: 1px solid __border__;
   	background-color: __background__;
   	text-align: left;
   	padding: 0.5em 0 0.7em 0;
   	}

2. Ajouter display:none; à la fin pour obtenir

   div.dokuwiki #toc__inside {
   	border: 1px solid __border__;
   	background-color: __background__;
   	text-align: left;
   	padding: 0.5em 0 0.7em 0;
   	display:none;
   	}

1. Ouvrir le fichier lib/scripts/script.js
2. Chercher

   /**
    * Adds the toggle switch to the TOC
    */
   function addTocToggle() {
       if(!document.getElementById) return;
       var header = $('toc__header');
       if(!header) return;
    
       var obj          = document.createElement('span');
       obj.id           = 'toc__toggle';
       obj.innerHTML    = '<span>&minus;</span>';
       obj.className    = 'toc_close';
       obj.style.cursor = 'pointer';
    
       prependChild(header,obj);
       obj.parentNode.onclick = toggleToc;
       try {
          obj.parentNode.style.cursor = 'pointer';
          obj.parentNode.style.cursor = 'hand';
       }catch(e){}
   }
    
    
   /**
    * This toggles the visibility of the Table of Contents
    */
   function toggleToc() {
     var toc = $('toc__inside');
     var obj = $('toc__toggle');
     if(toc.style.display == 'none') {
       toc.style.display   = '';
       obj.innerHTML       = '<span>&minus;</span>';
       obj.className       = 'toc_close';
     } else {
       toc.style.display   = 'none';
       obj.innerHTML       = '<span>+</span>';
       obj.className       = 'toc_open';
     }
   }

3. Remplacer par ceci :

   /**
    * Adds the toggle switch to the TOC
    */
   function addTocToggle() {
       if(!document.getElementById) return;
       var header = $('toc__header');
       if(!header) return;
    
       var obj          = document.createElement('span');
       obj.id           = 'toc__toggle';
       obj.innerHTML    = '<span>&minus;</span>';
       obj.className    = 'toc_open';
       obj.style.cursor = 'pointer';
    
       prependChild(header,obj);
       obj.parentNode.onclick = toggleToc;
       try {
          obj.parentNode.style.cursor = 'pointer';
          obj.parentNode.style.cursor = 'hand';
       }catch(e){}
   }
    
   /**
    * This toggles the visibility of the Table of Contents
    */
   function toggleToc() {
     var toc = $('toc__inside');
     var obj = $('toc__toggle');
     if(toc.style.display == 'block') {
       toc.style.display   = '';
       obj.innerHTML       = '<span>&minus;</span>';
       obj.className       = 'toc_open';
     } else {
       toc.style.display   = 'block';
       obj.innerHTML       = '<span>+</span>';
       obj.className       = 'toc_close';
     }
   }

— Laynee 2008/08/13 15:43