11548 sujets

JavaScript, DOM et API Web HTML5

Les 2 menus accordeons s'ouvrent en même temps POST RESOLU

Bonjour,
J'ai crée un menu accordeon avec seulement 2 onglets. j'utilise jquery.
problème quand je clique sur le premier onglet, le deuxième s'ouvre aussi. Je sais pas trop comment faire pour que si un l'ouvre, l'autre ne s'ouvre pas en même temps.
Merci pour votre aide 

<div class="accordion">
<h3 class="acc-title"><a class="acc-slide">Conseils</a></h3>
<div class="acc-content">
<ul>
<li> item 1</li>
<li> Item 2</li>
</ul>
</div>
</div>

Un peu de texte 
Puis deuxième onglet

<div class="accordion">
<h3 class="acc-title"><a class="acc-slide">Méthode</a></h3>
<div class="acc-content">
<ul>
<li> item 1</li>
<li> Item 2</li>
</ul>
</div>
</div>



    
 $(document).ready(function($) {
    $('.acc-content').hide(); 
    $('.acc-title a.acc-slide').click(function(){
    $('.acc-content').slideToggle();
        return false; 

    });

});

Modifié par dreadstock (10 Nov 2011 - 15:49)
Bonjour,

ton script ouvre tous les .acc-content au clic sur n'importe quel .acc-slide, il est donc normal que tes deux accordéons s'ouvrent en même temps.

Je ne connais pas très bien le js, mais une solution qui me parait évidente serait de dupliquer ton script, et de donner des ID plutôt que des classes à tes accordéons. Mais je suppose qu'il y a une meilleure façon de faire ça....

Bon courage !
Bonjour,

Essai avec un $(this) plutôt que le sélecteur de classe
$('.acc-title a.acc-slide').click(function(){
  $(this).slideToggle();
  return false; 
});
Romain.E a écrit :
Bonjour,

Essai avec un $(this) plutôt que le sélecteur de classe
$('.acc-title a.acc-slide').click(function(){
  $(this).slideToggle();
  return false; 
});



This ça fait ce que je veux sauf qu'au lieu de m'ouvir le acc-content, ca me ferme le acc-title !
Bizarre !
Donc c'est pas trop ca Smiley cligne
Dans ce cas c'est qu'il faut récuperer l'enfant de $(this):
$('.acc-title a.acc-slide').click(function(){
  $(this).children(".acc-content").slideToggle();
  return false; 
});
Il va manquer le parent car le this va correspondre a la balise <a> qui se trouve dans la balise <h3>

jQuery(document).ready(function(jQuery) {
	jQuery('.acc-content').hide(); 
	jQuery('.acc-title a.acc-slide').click(function() {
		jQuery(this).parent().next('.acc-content').slideToggle();
       	return false; 
    });
});
Merci Celestin,
C'est exactement ce que je voulais ! ca marche

Merci aux autres aussi pour leur aide !

POSTE RESOLU
Sujet clos
Aller à