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>

jQuery et slideToggle

jQuery

Vue hybride

Discussions similaires

Partager

Partager