SlideToggle(), ne marche quand j'utilise un next()

Bonjour!!

J'ai découvert un script utilisant slideToggle() qui permet d'afficher des éléments sous forme d'accordéon. Mon but est donc d'ouvrir une div pour afficher des images, et de refermer les autres div de mon accordéon.

Pour l'instant, cela ne fonctionne pas. Mon lien ".trigger" n'ouvre pas ma div ".toggle_container", car je n'arrive pas à "pointer" mon ".toggle_container" avec next(). Le problème est qu'il y a un span ".taxonomy" entre deux qui seme la zizanie.

Ma question est comment diable je peux faire pour cibler correctement mon ".toggle_container" pour pouvoir l'ouvrir en cliquant sur a.trigger ? j'ai utilisé un parent() en vain

Voici la structure de mon code css:

                        <div class="grid-12 portfolio">

                            <!-- voici le lien pour declencher l'ouverture -->
                            <h1><a href="#" class="trigger">link01</a></h1>

                            <span class="taxonomy">taxonomy01</span>

                            <!-- voici ma div qui doit s'ouvrir -->
                            <div class="grid-10 toggle_container">
                                text to show or hide01
                            </div>

                        </div>

et voici mon js:

$(document).ready(function() {
  // de base, les divs sont fermees
  $('.toggle_container').hide();
  
  $("a.trigger").click(function(){
  //j'ouvre ma div, mais ca ne marche pas, car il y a ce fichu span taxonomy
    $(this).parent().next('.toggle_container').slideToggle('fast')
       .siblings('div:visible').slideUp('fast');
  });
  
});

Merci!
Modifié par nforum (20 Feb 2010 - 21:40)

Hum ouai les menus accordéon, c'est pas forcément évident...

Pour ma part, je regroupe dans une div chaque paire titre/contenu, et je passe par le parent pour afficher... Je pense que c'est la solution la plus correcte, même si ça implique d'afficher une div. Sinon, on peut mettre l'id de la div à Toggler en cible de lien du titre ou autre, mais ça donne un code moins propre.

Merci pour ton conseil !!!
J'ai effectivement ajouter mon h1 et mon span "taxonomy" dans une div. Ensuite, j'ai appelé cette div dans ma fonction onclick et ça fonctionne. La solution est très simple, il suffisait juste d'y penser!
Par contre, j'ai toujours un problème. Mon but est de refermer les autres divs, lorsque l'on ouvre une nouvelle .toggle_container. Apparemment, mon .sibling() n'a pas l'air de vouloir fonctionner et je ne comprends pas pourquoi!

$(document).ready(function() {
  $('.portfolio> .toggle_container').hide();

  $('.portfolio> .trigger').click(function() {
      $(this).next('.toggle_container').slideToggle('slow')
      // c est ici que que le siblings ne reagit pas 
      .siblings('.toggle_container:visible').slideUp('fast');
	});

}); 

mon html avec la div en plus

<div class="grid-12 portfolio">
  <div class="trigger">
    <h1>Titre 01</h1>
    <span class="taxonomy">
    taxonomy01
    </span> 
  </div>
  
  <div class="grid-12 toggle_container">
  contenu 01						
  </div>
</div>

Modifié par nforum (21 Feb 2010 - 20:40)