jQuery et slideToggle

Version imprimable

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:

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:

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.

Salut,

Peut-être ainsi

Code:

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

18/02/2009, 08h53
jubourbon

Pas mieux :(

Code:

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

18/02/2009, 09h16
jubourbon

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:cry:

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

essaie ceci:
Code:

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

18/02/2009, 09h23
jubourbon

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.

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

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
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>

18/02/2009, 10h06
jubourbon

Pour ma part meme avec ton code j'ai tjs mon probleme d'objet attendu 8O. 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.
18/02/2009, 10h25
jubourbon

:yaisse2: 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:oops:

Merci pour l'aide.

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:

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:

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?

18/02/2009, 13h28
marcha

Regarde la fonction JQuery.parents()

Voila ce que j'ai fait:
Code:

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.

18/02/2009, 14h05
marcha

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.

Ok merci pour les conseils:king:. Dans cette galere j'aurais appris pas mal de chose sur Jquery:D

Mais ca ne marche tjs pas, voici mon code actuel
Code:

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.

18/02/2009, 15h32
marcha

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

Code:

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

et ainsi de suite

Parfait, ca fonctionne :yaisse2::

Code:

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

30/05/2009, 16h25
manimal69

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...