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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 !