Des modules 'repliables'

16.11.2008

Un besoin simple : réduire un module quand on clique sur son titre, le développer quand on reclique. Au lieu d'escamoter le contenu, on peut vouloir changer l'image de fond et/ou la couleur du texte et/ou sa taille, ou encore déplacer le module dans l'écran, ou… libre à vous.

En généralisant : quand on clique sur le titre la présentation du module change, qund on reclique elle revient à la normale.

Le programme que je vous propose (inutilisable au niveau Confiance) ne change pas l'aspect du blog. Il donne une classe supplémentaire aux modules désignés, cette classe change quand on clique sur leur titre – le reste est pure affaire de CSS.

Installation

Si vous n'avez jamais installé de JavaScript chez vous rendez-vous ici pour les détails.

Cliquez sur le bouton et sauvegardez le fichier sur votre ordinateur.
Ensuite stockez ce programme, sans rien y changer, dans l'espace Mes Documents/Autres fichiers de votre admin de blog.

Enfin, ajoutez une ligne au pied de page du blog :

 <script type="text/javascript" src="URL_du_programme"></script>

Remplacez bien sûr URL_du_programme par l'url effective du fichier. Voilà.

Mise en œuvre

À lui seul ce programme ne change rien à l'aspect du blog, il faut encore indiquer quels modules vous voulez rendre "cliquables".

Dotez d'abord chacun de ces modules d'un identifiant (comment fait-on ?) s'il n'en a pas déjà un.

Ensuite ajoutez dans le pied de page, après la ligne déjà ajoutée, une nouvelle section script sur le modèle suivant :

 <script type="text/javascript"> moduleCliquable('id_d'un_module','etat_initial'); moduleCliquable('id_d'un_autre_module','etat_initial'); </script>

Écrivez une ligne 'moduleCliquable' par module concerné. Indiquez-y l'identifiant (sans dièse !) du module et l'état initial (c'est facultatif) de ce module : on ou off.

Désormais chaque module mentionné reçoit, lors du chargement de la page, la classe on ou off que vous avez indiquée. Ensuite le module passe d'une classe à l'autre à chaque clic sur sa barre de titre, à vous de fournir les règles CSS qui décrivent ces deux classes.

Un exemple

Exemple bateau : on veut pouvoir plier ou déplier le module des derniers commentaires et celui des derniers articles.

Il faut d'abord décider de la signification de 'on' et 'off' : on décide que, pour ces modules, la classe on correspond à l'état déplié (=comme d'habitude) et la classe off à l'état replié.

Il faut aussi préciser le sens exact de 'plié' et 'déplié'. Admettons que

'plié' signifie qu'on cache le corps du module, en laissant visibles son titre et son 'footer', et aussi que le titre montre un signe 'plus'.
'déplié' signifie qu'on montre tout le module, et que le titre montre un signe 'moins'.

Les modules ordinaires (=inertes) n'auront aucun signe distinctif dans leur titre. On espère ainsi que le visiteur du blog, retrouvant des conventions familières, ne sera pas trop dérouté. C'est important de ne pas trop dérouter les visiteurs, j'en sais quelque chose…

Vous avez bien pigé l'idée, elle vous convient ? Bon, allons-y.

Commencez par donner un identifiant à chacun de ces modules, mettons artRecent et commRecent (mais vous choisissez bien ce qui vous convient).

Dans le pied de page du blog, après la ligne qui appelle le programme, ajoutez ceci :

 <script type="text/javascript"> moduleCliquable('artRecent','on'); moduleCliquable('commRecent','on'); </script>

N'oubliez pas les apostrophes et ne confondez pas majuscules et minuscules !

Pour montrer ou cacher le contenu, deux nouvelles lignes de CSS :

 .on .box-content {display:block} /* dans l'état 'on' on montre le contenu du box */ .off .box-content {display:none} /* dans l'état 'off' on le cache */

Pour la barre de titre préparez d'abord deux images de fond similaires, l'une avec le plus et l'autre avec le moins, puis trois autres lignes de CSS pour s'en servir :

 .on .box-title,.off .box-title {background-position: left center; background-repeat: no-repeat} .on .box-title {background-image:url('URL_de_l'image_avec_moins')} .off .box-title {background-image:url('URL_de_l'image_avec_plus')}

Total : cinq lignes de CSS et c'est tout. Vous avez compris le principe ?

D'autres exemples

Pour grossir les caractères de 20%, ce sera :

 .on .box-content {font-size:120%} .off .box-content {font-size:100%}

Encore un exemple : pour déplacer le module de 20 pixels vers la droite, ce sera :

 .box.on, .box.off {position:relative} .box.on {left:20px;} .box.off {left:0px;}

… et ainsi de suite. Tant pis si je me répète : les deux classes on et off n'ont que la signification que vous leur donnez par le CSS.

Deux remarques

D'abord ce gadget n'agit pas sur tous les modules mais seulement sur ceux que vous indiquez dans les lignes du bas de page, donc pensez à les mentionner ! Les autres modules restent inchangés.

Ensuite : si le lecteur de votre blog navigue sans JavaScript il ne verra aucun changement, ni en bien ni en mal – ça, j'aime bien.

Et voilà toute la partie pratique.

Merci à Cln pour les tests.

Démontage

Le présent article vous fournit le programme et son mode d'emploi. Son article jumeau démonte entièrement le programme si vous voulez comprendre comment il marche (lecture totalement facultative mais espérée intéressante !).

Mises à jour

Octobre 2008 : 1ère publication
Mai 2012 : simplification du programme, mise à disposition du programme sous forme téléchargeable, révision de l'article, réécriture de la dissection du programme et report dans un article séparé.