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

Par défaut, lorsque l'on arrive sur une page de [[fr:DokuWiki]], la [[fr:toc|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 l'entête de la table des matières pour afficher son contenu.

===== Méthode standard =====

Cette astuce est directement repiquée du thème [[template:typo|Typo]] de Michael Klier.

1) Dans le répertoire de configuration de DokuWiki((celui qui contient ''local.php'', ''acl.auth.php'', ''dokuwiki.php'', ''entities.conf'' etc...)), créez un fichier ''userscript.js'' contenant ceci :

<code javascript>
addInitEvent(function() {
  var toc = $('toc__inside');
  if(toc) {
    toc.style.display   = 'none';
  }
});
</code>

Alternativement, vous pouvez aussi mettre ce code dans le fichier ''script.js'' du répertoire de votre thème.

2) Videz le [[fr:config:cachetime|cache]] manuellement ou attendez qu'il expire automatiquement pour voir le résultat.

===== Autre méthode (non-recommandée) =====

==== 1. Modification CSS ====

  - Dans le fichier CSS du [[fr:template]], chercher <code css>div.dokuwiki #toc__inside {
	border: 1px solid __border__;
	background-color: __background__;
	text-align: left;
	padding: 0.5em 0 0.7em 0;
	}</code>
  - Ajouter ''display:none;'' à la fin pour obtenir <code css>div.dokuwiki #toc__inside {
	border: 1px solid __border__;
	background-color: __background__;
	text-align: left;
	padding: 0.5em 0 0.7em 0;
	display:none;
	}</code>

==== 2. Modification JavaScript ====

  - Ouvrir le fichier ''lib/scripts/script.js''
  - Chercher <code javascript>/**
 * 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';
  }
}</code>
  - Remplacer par ceci : <code javascript>/**
 * 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';
  }
}</code>
 --- //Laynee 2008/08/13 15:43//

===== Replier la table des matières sur certaines pages seulement =====

:!: Cette méthode n'est pas compatible avec les greffons qui génèrent autre chose que du html (par exemple le greffon [[:plugin:odt|odt]])

Créer ou éditer le fichier ''entities.local.conf'' dans le répertoire de configuration de dokuwiki((celui qui contient ''local.php'', ''acl.auth.php'', ''dokuwiki.php'', ''entities.conf'' etc...)) et mettre le code suivant dedans. **Attention**, tout doit tenir sur une seule ligne

  * code pour les versions de DokuWiki plus anciennes que 2011-11-10 (Angua)<code>
~~closetoc~~ <script language="javascript" type="text/javascript">addInitEvent(function(t){if(t=$('toc__inside'))t.style.display='none';});</script>
</code>
  * code pour les versions de DokuWiki à partir de 2011-11-10 (Angua)<code>
~~closetoc~~ <script language="javascript" type="text/javascript">jQuery(function(){jQuery('div\x23toc__header').click();});</script> 
</code>
Ensuite, il suffit d'écrire ''~~closetoc~~'' dans une page pour que celle ci apparaisse avec une table des matières initialement repliée.
 
 --- [[user>schplurtz|schplurtz]] //2011/06/25 12:56//


----


Ce sujet est-il toujours à jour ? La modification simple dans userscript.js ne fonctionne pas.

 --- [[user>karibou|karibou]] //2013/12/30 23:22//