Discussion :

[Mika91450]

Bonjour, je suis nouveau en jquery et j'ai un problème pour cacher/afficher certaines DIV.
Ci-dessous, un bout de code pour expliquer l'idée. En fait, j'ai plusieurs DIV de class N1, N2 et N3. Il peut y en avoir plus (ex : N4, N5, Nx).
Dans ma fonction jquery, je cache toutes les DIV sauf la N1 qui est la base des mes chapitres.
Ce que je voudrais faire, c'est que, quand je clique sur la DIV N1, il ne m'affiche que les DIV N2 jusqu'à la prochaine div N1. Et ainsi de suite... quand je clique sur la DIV N2, il ne m'affiche que les DIV N3 jusqu'à la prochaine div N2.
Avec ma fonction, quand je clique sur N1, il me deploie bien toutes les N2 jusqu'à la prochaine N1 mais aussi les N3 que je ne veux pas voir(sauf si je clique sur N2).
Est-ce que quelqu'un pourrait m'aider.

Merci d'avance.

Voilà mon code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div class="N1">Niveau 1</div>
      <div class="N2">BlaBla niveau 2</div>
           <div class="N3">BlaBla niveau 3</div>
     <div class="N2">Autre blabla niveau 2</div>
           <div class="N3">Encore du blabla dans la balise de niveau 3</div>
<div class="N1">Ici une autre balise de Niveau 1</div>
     <div class="N2">la une balise de niveau 2</div>
           <div class="N3">Et la, toujours du BlaBla niveau 3</div>

Ma fonction Jquery ressemble à ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$(function() {
        // Cacher les div N2 et N3.
	$(".N2,.N3").hide();
	// Cacher/afficher des div sur click.
	$(".N1").click(function() {
		$(this).nextUntil(".N1").slideToggle("fast");
		$(this).toggleClass("expand");
	});
    });

[SpaceFrog]

Tu ne lui donnes que la moitié des instructions ..

là tu lui dit :
déplie tout jusqu'au prochain N1

dis lui
déplie tout jusqu'au prochain N1 SAUF les N3 ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).nextUntil(".N1").not('.N3').slideToggle("fast");

http://jsfiddle.net/VwY4K/1/

[Mika91450]

Merci SpaceFrog pour ta réponse, effectivement ça fonctionne mieux comme ça.

Par contre, le problème se corse si je veux déployer N3.

j'ai ajouté une nouvelle fonction pour Afficher/Cacher N3 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$(".N2").click(function() {
$(this).nextUntil("div.N2").slideToggle("fast");
$(this).toggleClass("expand");
});

Inconvénient, si on reprend mon HTML, quand je clique sur "Autre blabla niveau 2", comme la div N2 suivante est après N1, il me cache N1. Pas glop !
En plus, je suis obligé d'ajouter une fonction pour chaque niveau. Donc si j'en ai 6, j'ai 6 fonctions.

J'ai tenté quelquechose de style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
$(function() {
    $("div:not(.N1)").hide();
    $(this).click(function() {
        $(this).children().slideToggle("fast");
    });
});

Mais là, je n'ai pas compris le comportement, jquery me passe carrément la balise HTML en display:none alors que je demande un toggle des enfants.
A mon avis c'est un bug utilisateur (moi ). Je ne dois pas bien comprendre le fonctionnement de "This".

Je vais quand même passer le post en Résolu car j'ai eu ma réponse mais si quelque'un à une idée pour éviter d'avoir une fonction par niveau, je suis preneur.

[Spartacusply]

Avec un html construit de la sorte, oui tu seras obligé de créer une fonction par niveau, ou alors de bidouiller fortement.

Voici un exemple de ce qui serait possible de faire récursivement, sur un nombre de niveau illimité à partir du moment où tu imbriquerais tes divs les uns dans les autres : http://jsfiddle.net/u6tJU/


"this" référence ton objet, or dans ta fonction jquery globale (la fonction "$(function(), qui englobe toutes les autres), "this" référence l'ensemble de ta page, normal qu'il te ferme l'ensemble de ton html quand tu cliques n'importe où sur ta page !.

[Mika91450]

Super, merci beaucoup pour votre aide.

J'allais a reculons sur Jquery, mais là je pense que beaucoup plus m'en servir.

Mika