Un toggle sur une image

Version imprimable

Bonjour,

Pour les besoins du blog dont je m'occupe, je cherche à afficher ou masquer le contenu des commentaires à la demande, par un clic sur une image.

J'ajoute cette image via javaScript ; ainsi, si celui-ci est désactivé, le visiteur ne verra pas d'image inutile (impossible à cliquer).

Le résultat est visible sur cette page.

Voici le code javaScript que j'utilise :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 $(document).ready( function () { document.documentElement.className += ' js'; $("#lastcomments > li").image( "http://sxjpl.free.fr/dotclear-files/themes/biblio/img/plus.png", function () { $(this).click( function () { $(this).nextAll(".toggle").first().toggle("slow"); if ($(this).hasClass('expand')) { $(this).removeClass('expand'); $(this).alt="masquer le commentaire"; $(this).attr("src", "http://sxjpl.free.fr/dotclear-files/themes/biblio/img/plus.png"); } else { $(this).addClass('expand'); $(this).alt="devoiler le commentaire"; $(this).attr("src", "http://sxjpl.free.fr/dotclear-files/themes/biblio/img/minus.png"); } }); } ); }); $.fn.image = function (src, f) { return this.each(function () { $("<img />").appendTo(this).each( function () { this.src = src; this.onload = f; }); }); }
J'ai deux problèmes avec ce code :
1. il faut cliquer DEUX fois au lieu d'une sur l'image "plus" pour qu'elle se change en "moins", et inversement !
2. Le contenu du commentaire n'est pas affiché quand on clique. Il y a donc un problème avec le $(this).nextAll(".toggle"), qui ne pointe pas correctement vers le contenu du commentaire. J'ai essayé $(this).parent().nextAll(".toggle") sans plus de succès, et je suis à court d'idées !

Toute aide serait grandement appréciée. Un grand merci d'avance !

03/03/2012, 17h57
FixSan

Mon point 2 est résolu ! Ça ne pouvait pas fonctionner, car l'image était ajoutée À LA FIN du contenu de <li>, c'est-à-dire APRÈS le commentaire. Il fallait donc mettre :

Code:

$("<img />").prependTo(this).each( function () {

à la place de :

Code:

$("<img />").appendTo(this).each( function () {

Il n'empêche que j'ai toujours un problème : maintenant, un clic sur l'image dévoile bien le contenu du commentaire, mais quand on reclique dessus, le commentaire se déplie et se replie à plusieurs reprises avant d'être "caché" !

C'est toujours visible ici.

Une idée de ce qui cloche dans le code donné précédemment ? Merci de votre aide !

Bon, j'ai fini par résoudre tous mes petits problèmes. Et sans aide : je suis fier de moi ;)

Voici le code javaScript que j'utilise au final :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$(document).ready( function () {
	document.documentElement.className += ' js';
	$("#lastcomments > li").image(
		"../dotclear-files/themes/biblio/img/plus.png"
	);
	$("#lastcomments > li > a > img").click( function () {
		$(this).closest("li").find(".toggle").toggle("slow");
		if ($(this).hasClass('collapse')) {
			$(this).removeClass('collapse');
			$(this).attr("alt", "d\351voiler le commentaire");
			$(this).attr("src", "../dotclear-files/themes/biblio/img/plus.png");
		} else {
			$(this).addClass('collapse');
			$(this).attr("alt", "masquer le commentaire");
			$(this).attr("src", "../dotclear-files/themes/biblio/img/minus.png");
		}
		return false;
	});
});
 
$.fn.image = function (src) {
	return this.each(function () {
		$("<img />").prependTo(this).each( function () {
			this.src = src;
			this.alt = "d\351voiler le commentaire";
		});
		$("#lastcomments > li > img").wrap("<a href=\"#\"></a>");
	});
}

Je ne suis pas certain que ce soit très bien codé... mais au moins, ça fonctionne.