jQuery et slideToggle

**jubourbon** · 17/02/2009, 16h35

Bonjour à tous,

Je cherche à ajouter une fonction pour faire apparaitre et disparaitre un tableau avec un click.

Apres recherche sur le net j'ai trouvé la library jQuery, mais ne parvient pas à la faire fonctionner.

Je suis un peu debutant en javascript.

Voici mon code jscript:

Code :

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

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript" src="Js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
    $("div.voir").click(function(){
        $(this).parent().find("div.BaliseGene").next("div.BaliseTab").slideToggle("slow");
    });
});
</script>

et voila mon code html:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div class="TitreGene">Titre Generale<a href="#" class="voir">^</a></div>
    <div class="BaliseGene">
      <div class="BaliseTab">
        <div class="TitreTab">
              <div class="TitreTabText">TitreTab1</div>
              <table>...</table>
        </div>
     </div>
   </div>

Les multiple div me servent pour le CSS.

Si qq un peut m'aiguiller.

Merci d'avance.

**marcha** · 18/02/2009, 08h48

Salut,

Peut-être ainsi

Code :

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

1
2
3
4
5
$(document).ready(function(){ 
    $("div.voir").click(function(){
        $("div.BaliseTab", this).slideToggle("slow");
    });
});

**jubourbon** · 18/02/2009, 08h53

Pas mieux

**Bovino** · 18/02/2009, 09h07

Code :

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

1
2
3
4
5
6
$(document).ready(function(){ 
    $("div.voir").click(function(){
        $("div.BaliseTab", this).slideToggle("slow");
        return false;
    });
});

**jubourbon** · 18/02/2009, 09h16

Bovino, quand j'utilise tojn code en ajoutant une alerte, il ne la detecte pas

J'ai changé le div.voir par a.voir et il detecte l'alerte, mais toujours pas de tableau accordeon

**marcha** · 18/02/2009, 09h16

Tu n'as pas de div de class='voir' dans ton code.
donc div.voir sélectionne rien.

essaie ceci:

Code :

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

1
2
3
4
5
6
 
$(document).ready(function(){ 
   $("a.voir").click(function(){
        $("div.BaliseTab", $(this.parentNode).next("div.BaliseGene")).slideToggle("slow");
    });
});

**jubourbon** · 18/02/2009, 09h23

Oui marcha, c'est bien ce que je me disais.

Ton code me renvoi une erreur "Objet Attendu", comme si il ne trouvais pas mes balises. Ne faudrait il pas passé par des id plutot qu edes classes? Ce qui ne m'arrangerait pas du tt, car la generation de mes tableau est completement dynamique et leur nombre est aleatoire.

**marcha** · 18/02/2009, 09h39

Voici mon code de test qui fonctionne chez moi (FireFox)

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<title>test</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<script type='text/javascript' src='/libs/jquery-1.3.1.min.js'></script>
<script type='text/javascript' src='/libs/debug.js'></script>
<script type='text/javascript'>
$(document).ready(function(){ 
   $("div.BaliseTab").hide();
   $("a.voir").click(function(){
        $("div.BaliseTab", $(this.parentNode).next("div.BaliseGene")).slideToggle("slow");
    });
});
</script>
</head>
<body>
<div class="TitreGene">Titre Generale<a href="#" class="voir">^</a></div>
    <div class="BaliseGene">
      <div class="BaliseTab" style='background-color: red'>
        <div class="TitreTab">
              <div class="TitreTabText">TitreTab1</div>
              <table><tr><td>...</td></tr></table>
        </div>
     </div>
   </div>
 
</body>
</html>

**jubourbon** · 18/02/2009, 10h06

Pour ma part meme avec ton code j'ai tjs mon probleme d'objet attendu

. Je l'ai simplement copié coller dans une nouvelle page.

J'ai une grosse contrainte c'est que je suis obligé de developper sous IE6, mais je l'ai testé sous Firefox et idem.

**jubourbon** · 18/02/2009, 10h25

J'ai trouvé le pourquoi de l'objet attendu et donc la solution à mon pb:
Visual attendais un chemin en dur vers la librairie Javascript

Merci pour l'aide.

**jubourbon** · 18/02/2009, 11h55

Heu, juste une derniere question:

j'essaye à present de faire la meme chose avec le niveau en dessous, c'est a dire avec le code html:

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
 
<body>
<div class="TitreGene">Titre Generale<a href="#" class="voir">^</a></div>
    <div class="BaliseGene">
      <div class="BaliseTab" style='background-color: red'>
        <div class="TitreTab">
              <div class="TitreTabText">TitreTab1<a href="#" class="voir2">^</a></div>
              <table class="tableau"><tr><td>...</td></tr></table>
        </div>
     </div>
     <div class="BaliseTab" style='background-color: green>
        <div class="TitreTab">
              <div class="TitreTabText">TitreTab2<a href="#" class="voir2">^</a></div>
              <table class="tableau"><tr><td>...</td></tr></table>
        </div>
     </div>
 
   </div>

Et la je me perd dans les noeuds. J'ai essaye ceci sans succées:

Code :

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

1
2
3
4
5
6
7
8
9
 
<script type='text/javascript'>
$(document).ready(function(){ 
   $("table.tableau").hide();
   $("a.voir2").click(function(){
        $("table.tableau", $($(this.parentNode).parentNode).next("div.BaliseTab")).slideToggle("slow");
    });
});
</script>

Comment faire pour atteindre le noeuds grand parent puis deplier table?

**marcha** · 18/02/2009, 13h28

Regarde la fonction JQuery.parents()

**jubourbon** · 18/02/2009, 13h53

Voila ce que j'ai fait:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<script type='text/javascript'>
$(document).ready(function(){ 
    $("table.tableau").hide();
   $("a.voir2").click(function(){
    var mavar=$(this).parents("div.BaliseTab");
       var montableau = $(mavar).next("table.tableau");
        $(montableau).slideToggle("slow");
    });
});
</script>

Mais ce ne foinctionne pas, est ce que je m'y prend bien pour les declaration/utilisation de variable? Chaque tuto sur Jquery que j'ai trouvé n'utilise jamais de variables, alors j'improvise.

**marcha** · 18/02/2009, 14h05

Salut,

quand tu fais une selection avec $(...) tu obtiens une instance
d'un objet Jquery (qui peut être entre 0 et n éléments)

Si tu sauve cet instance dans une variable puis que tu utilise
cette variable pour appeler d'autre fonctions tu n'as pas besoin
de refaire $(...) tu écris juste: mavar.next("table.tableau"); par exemple.

**jubourbon** · 18/02/2009, 14h53

Ok merci pour les conseils

. Dans cette galere j'aurais appris pas mal de chose sur Jquery

Mais ca ne marche tjs pas, voici mon code actuel

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<script type='text/javascript'>
$(document).ready(function(){ 
    $("table.tableau").hide();
   $("a.voir2").click(function(){
    var mavar=$(this).parents("div.BaliseTab");
       var montableau = mavar.next("table.tableau");
        montableau.slideToggle("slow");
    });
});
</script>

Mais ca ne marche pas

La je ne vois pas, mon code me semble logique, doit y avoir une erreur de syntaxe specifique à JS.

**marcha** · 18/02/2009, 15h32

Essaie de procéder par étapes pour voir si tu sélectionne les bon
éléments, par exemple en modifiant un style:

Code :

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

$(this).parents("div.BaliseTab").css('backgroundColor', 'red');

et ainsi de suite

**jubourbon** · 18/02/2009, 15h55

Parfait, ca fonctionne

:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<script type='text/javascript'>
$(document).ready(function(){ 
    $("table.tableau").hide();
   $("a.voir2").click(function(){
    var mavar=$(this).parents("div.BaliseTab");
       var montableau = mavar.find("table.tableau");
        montableau.slideToggle("slow");
    });
});
</script>

Merci pour tes conseils

**manimal69** · 30/05/2009, 16h25

Bonjour a tous,
Je suis encore qu'un débutant dans le domaine des sites web, en ce moment je cherche à faire un menu déroulant avec la librairie Jquery, le menu marche parfaitement, le seul souci est que dés que je clique sur une rubrique, toutes les autres rubriques en dessous s'ouvrent avec, si une âme charitable pouvait m'aidé, ce serai sympa...

jQuery et slideToggle

jQuery

Discussions similaires

Partager

Partager