jQuery multi slideToggle dans le même écran

Depuis que j’utilise jQuery, je suis plus fan chaque jour. Dernièrement j’avais besoin d’utiliser la fonction slideToggle() pour ajouter un joli effet sur un de mes développements. Et tous les tutoriels que j’ai trouvé, n’étaient valables que dans le cas d’une seule action dans le même affichage.

Hors dans mon cas, pour imager, j’avais l’équivalent d’une FAQ à afficher avec à chaque lien, l’affichage par l’ouverture visuelle du DIV contenant la réponse à la question.

Après de longues recherches, j’ai enfin trouvé ce super tuto de Karl Swedberg (accordion-madness) en anglais.

Pour mon cas bien précis, voici l’interprétation minimale, mais suffisante de ce qu’il faut faire pour utiliser plusieurs slideToggle() sans avoir besoin de les numéroter par exemple.

Il y a bien sûr d’autre solutions à base d’expressions régulières, mais celle-ci me semblait la plus simple, spécialement grâce à l’utilisation de la fonction next().

Voici le code html :

<li id="question-list">
<a href="#" id="slick-toggle"><h4>mon premier titre<h4></a>
<div style="display: none;" id="slickbox">bla bla bla 1
<li id="question-list">
<a href="#" id="slick-toggle"><h4>mon deuxième titre<h4></a>
<div style="display: none;" id="slickbox">bla bla bla 2

Et le code javascript :

$(document).ready(function() {
 $('#slickbox').hide();
 // toggles the slickbox on clicking the noted link
 $('a#slick-toggle').click(function() {
 var $nextDiv = $(this).next();
 var $visibleSiblings = $nextDiv.siblings('div:visible');

 if ($visibleSiblings.length ) {
 $visibleSiblings.slideUp('fast', function() {
 $nextDiv.slideToggle("slow");
 });
 } else {
 $nextDiv.slideToggle("slow");
 }
 });
});

Et voilà mes superbes textes qui disparaissent par défaut et apparaît seulement le texte après le titre qui a été cliqué.

En espérant que cela vous aide, amusez-vous bien.