Discussion :

[la_chouette]

Bonjour,

J'essaie de remplacer une class sur une balise h3 suivant l'état (afficher/masquer) d'un div qui la suit.

Exemple

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
$(document).ready(function() {
	$(".features div").hide(); // Masque tout les div par défaut
 
	$(".features h3").addClass("expand"); // Ajoute la class expand aux balises H3
 
	$(".features h3").click(function() {
 
	$(".features div").slideUp(10);	// Si il y'a un div ouvert on le referme
 
	$(this).next(".features div").toggle(); // Ouvre le div suivant la balise H3
 
		// Vérifie l'état des div (afficher/masquer) et applique la class correspondante
		$(this).next(".features div").is(':hidden') ? $(this).removeClass("collapse").addClass("expand") : $(this).removeClass("expand").addClass("collapse");
	});
});

Ou une démo ici: http://jsfiddle.net/dA6ww/4/

Les puces collapse et expand, si vous cliquez vous verrez quel ne reviennent pas à leurs états initial ...

merci d'avance pour votre aide ...

Cordialement

[danielhagnoul]

Bonsoir

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
30
// les divisions enfants de la division ayant la classe features
var jObjDivs = $(".features").children("div");
 
// on les cache toutes
jObjDivs.hide();
 
$(".features")
	.children("h3") // tous les h3 enfants de
	.addClass("expand")
	.click(function(){
		// la division qui suit le h3 cliqué
	    var jObjDiv = $(this).next();
 
		// on si off et inversement
		jObjDiv.toggle();
 
		// pour toutes les div enfants
		jObjDivs.each(function(i, item){
			// on teste si la div traitée est celle qui suit le h3 cliqué
			if (item != jObjDiv[0]){
				// ce n'est pas elle
				$(item).hide();
				// $(item).prev() : on sélectionne le h3 qui précède cette div
				$(item).prev().removeClass("collapse").addClass("expand");
			} else {
				// c'est elle
				$(item).prev().removeClass("expand").addClass("collapse");
			}
		});
    });