Présentation
Cet outil vous permet de créer des blocs dont le titre cliquable peut les rendre visibles ou invisibles. Vous pouvez les insérer directement dans le texte de vos articles ou dans vos squelettes (fichiers .html).
Dans les textes SPIP : les rédacteurs ont à disposition les nouvelles balises <bloc> (ou <invisible>) et <visible> à utiliser dans leurs textes comme ceci :
<bloc>
Un titre qui deviendra cliquable
Le texte à cacher/montrer, après deux sauts de ligne...
</bloc>
• Résumé
Pour qu’un résumé puisse alterner avec le contenu du bloc initialement caché, utiliser les balises <resume></resume> après le double saut le ligne comme ceci :
<bloc>
Le titre
<resume>Un résumé</resume>
Le contenu du bloc plu développé
Dans les squelettes : vous avez à votre disposition les nouvelles balises #BLOC_TITRE, #BLOC_RESUME, #BLOC_DEBUT et #BLOC_FIN à utiliser comme ceci :
#BLOC_TITRE
Mon titre
#BLOC_RESUME
Le résumé de la suite
#BLOC_DEBUT
Mon bloc dépliable
#BLOC_FIN
• Résumé
La balise #BLOC_RESUME est facultative. En cas d’utilisation, le résumé entre #BLOC_RESUME et #BLOC_DEBUT sera masqué lorsque le bloc est rendu visible.
Toutefois, seul le titre reste cliquable.
• Ajax
Pour utiliser Ajax, il faut préciser l’URL à charger grâce à la balise #BLOC_TITRE{mon_URL} à laquelle vous ajoutez un paramètre. Le fichier (ou l’adresse) pointée par l’url sera alors chargée dans le BLOC (entre #BLOC_DEBUT et #BLOC_FIN) avant que le bloc ne soit rendu visible.
Installation
L’outil décrit ici est une fonctionnalité du plugin « Le Couteau Suisse » que vous pouvez trouver ici : Le Couteau Suisse.
Pour avoir accès aux raccourcis et aux balises décrits dans cet article, il vous faut donc avoir préalablement installé ce plugin en suivant la procédure normale d’installation des plugins SPIP.
Ensuite, veuillez activer l’outil « Blocs Dépliables » en vous rendant sur la page d’administration du plugin en espace privé (Bouton Configuration, et onglet "Le Couteau Suisse").
Une fois cet outil activé, vous aurez enfin la possibilité d’insérer dans vos articles ou dans vos squelettes des blocs dépliables/repliables.
Dépendances
Cet outil a besoin de la librairie jQuery. Le site officiel (en anglais) est : http://jquery.com/. D’autres informations sont disponibles en français ici : http://www.jquery.info/. Cette librairie de fonctions Javascript a été complètement intégrée dans SPIP à partir de la version 1.92. Pour les versions antérieures, il vous faudra installer un plugin spécifique que vous pouvez télécharger ici : http://files.spip.org/spip-zone/jqu....
Personnalisation des blocs
Les CSS doivent être ajoutées dans le fichier habituel de vos squelettes. En ce qui concerne la dist SVN de SPIP, il s’agit du fichier "habillage.css". On le surcharge souvent à la racine du squelette utilisé pour le site.
Il y a une autre possibilité encore, celle de surcharger directement le fichier plugins/couteau_suisse/outils/blocs.css.html en le recopiant dans monsquelette/outils/blocs.css.html et en y modifiant les styles proposés ou en y ajoutant vos propres styles.
Attention : toute modification d’un fichier surchargé nécessite une recompilation des outils du Couteau suisse, obtenue en se rendant simplement sur la page de configuration du plugin ou en réaffichant celle-ci.
Un bloc <bloc> est construit comme ceci :
<div class="cs_blocs"><h4 class="blocs_titre blocs_replie"><a href="#">un titre</a></h4><div class="blocs_invisible">le contenu</div></div>Si l’on veut en modifier l’apparence, il suffit donc de déclarer un style perso comme ceci :
div.cs_blocs>div {
border:solid 2px;
}
h4.blocs_titre, h4.blocs_replie {
background:transparent none;
}Dans cet exemple, tous les <bloc> auront un cadre noir autour du contenu et les tous les titres de blocs repliables h4 seront privés de leur petit triangle.
Pour y voir plus clair, je conseille toujours de débuguer son site avec FireFox et l’excellente extension FireBug. On peut y gérer les CSS et débugger le JS à la volée, c’est très pratique.
Blocs numérotés
Vous avez la possibilité d’ajouter un numéro à vos raccourcis, afin de mieux cibler l’apparence que vous pourriez donner à vos blocs dépliables. En utilisant par exemple <bloc2> (ou <invisible2> ou <visible2>), la classe « cs_bloc2 » sera ajoutée au bloc <div principal :
<bloc2>
Un titre qui deviendra cliquable
Le texte à cacher/montrer, après deux sauts de ligne...
</bloc2>
Ce bloc <bloc2> est construit comme ceci :
<div class="cs_blocs cs_bloc2"><h4 class="blocs_titre blocs_replie"><a href="#">un titre</a></h4><div class="blocs_invisible">le contenu</div></div>si l’on veut en modifier l’apparence, il suffit donc de déclarer un style perso comme ceci :
div.cs_bloc2>div {
border:solid 2px;
}
div.cs_bloc2 h4.blocs_titre, div.cs_bloc2 h4.blocs_replie {
background:transparent none;
}Dans cet exemple, tous les <bloc2> auront un cadre noir autour du contenu et seuls les titres de ces blocs h4 seront privés de leur petit triangle.
Déplier un bloc au chargement de la page
Cela peux se faire directement en jQuery (code Javascript à insérer dans votre squelette) en simulant un clic de souris.
La fonction eq(index) permet de choisir le bloc à déplier, sachant que la variable index commence à zéro. L’exemple suivant déplie le premier bloc de la page :
jQuery(document).ready(function() {
jQuery('h4.blocs_titre').eq(0).click();
});
qu’es-ce qui ne marche pas ? Ajax (avec url) ou pas d’ajax ? Résumé (avec 
RSS 2.0