Voici une petite astuce qui va vous permettre d’utiliser l’effet toggle() Jquery Site Jquery Toggle() de manière générique.
L’idée est de ne plus se soucier du Javascript pour vos toggles. Je vais vous montrer cela avec un exemple concret :
//Nous avons ici le lien cliquable qui va afficher ou cacher le bloc "fils" <a rel="bloc-fils" class="toggle-rel" href="#"> Lien toggle </a> //Ici le bloc fils <div id="bloc-fils">... ici le contenu à afficher ou à cacher ...</div>
Maintenant il suffit juste de rajouter ce mini javascript à votre projet :
$(document).ready(function() {
$(".toggle-rel").click(function () {
id = $(this).attr("rel");
$("#"+id).slideToggle("slow");
});
});
Et voila, vous pouvez utiliser cela pour tous vos différents lien/bloc toggle jquery.
To be continued…
J’ai compris le script, mais je ne vois pas vraiment l’intérêt et le plus qu’il apporte.
L’idée serait d’avoir un lien de type « Afficher/cacher ce bloc » générique, en ne changeant que le rel pour désigner le bloc concerné ?
Personnellement, je trouve l’idée intéressante, mais la méthode n’est pas très pratique, puisqu’elle oblige à faire un pseudo-lien mort (l’ancre vide), en « dur » dans le HTML en plus (gare aux oublis). Et si l’utilisateur n’a pas Javascript, les blocs peuvent rester cachés à cause du CSS.
J’ai eu droit à la même problématique sur mon blog, quand j’ai voulu faire un bouton « Spoiler ».
J’ai opté pour un HTML minimum, une simple classe spoiler à mettre sur le bloc qu’on veut cacher. Le script cache le bloc d’abord, rajoute un bouton avant qui au clic fait apparaitre/disparaitre le bloc. Le type « button » me semble plus « valide » qu’un lien mort, moins d’HTML à gérer, et sans javascript le contenu n’est pas caché.
(script en accès direct : http://perfectfab.free.fr/public/jQ... )
Le seul problème auquel je me heurte, c’est s’il y a plus d’un élément caché, un seul bouton affiche tous les blocs, et c’est la ou ta méthode est plus efficace puisque chaque bloc est différencié.
J’ai donc suivi ton idée et ton script en introduisant la différenciation via l’attribut title (rel étant réservé aux liens, title est encore l’attribut le plus neutre).
J’affecte donc une variable qui retient la valeur du title pour chaque bloc, toujours les même boutons qui ont eux aussi la variable title de leur blocs respectifs, et ensuite chaque bouton affiche son bloc la aussi en fonction du title affecté.
(script en accès direct : http://perfectfab.free.fr/public/jQ... )
Je ne sais pas si tu changeras ton code, mais tu m’as permis d’améliorer le mien. Merci beaucoup !
Merci pour ton intervention.
Je vais un peu plus creuser la question de l’utilisation de title par rapport aux attributs rel et voir ce qu’il en est.
En soi, rel est un bon choix, puisqu’il décrit la relation par rapport au lien (cf la page W3C correspondante que j’ai lu la dernière fois).
Mes remarques étaient plus sur le coté « plus de HTML ou plus de javascript », mais c’est une question de « style » de programmation. Néanmoins, le souci des non-utilisateur de javascript reste posé.
Grace à ton billet, j’ai pu grandement améliorer mes propres scripts, puisque j’ai maintenant un afficheur de notes de bas de page (même 2, un pour la home et un autre pour les billets), et mon script de spoiler est maintenant utilisable plus d’une fois par page. Merci encore.