Accordéon simple avec jQuery

Dans un de nos projets client, le site web utilisait le composant accordéon de jQueryUI, version 1.5. Suite à une demande du client, il souhaitait que l'état de chaque élément du menu soit fermé par défaut, qu'il y ait une animation en glissement à l'ouverture et la fermeture et que plusieurs éléments puissent être ouverts en même temps.

En lisant la documentation, il valait mieux passer à la version la plus récente (1.8) pour pouvoir paramétrer le composant correctement et obtenir tout ce qu'il voulait. En regardant ce dont il était question, on s'est vite rendu compte que ça ne devait pas être complexe à programmer et qu'à l'origine, la personne qui avait intégré le plugin d'accordéon s'était peut-être compliquée la vie pour rien.

On s'est dit tant pis et on a débarqué jQueryUI. Mais on a conservé le framework jQuery pour servir de point de départ à notre propre contrôle.

En partant avec un markup HTML semblable à celui-ci :

<ul id="menu">
   <li>
   <a href="javascript:;">Titre 1</a>
   <div>
       Lorem ipsum 1
   </div>
   </li>
   <li>
   <a href="javascript:;">Titre 2</a>
   <div>
       Lorem ipsum 2
   </div>
   </li>
   <li>
   <a href="javascript:;">Titre 3</a>
   <div>
       Lorem ipsum 3
   </div>
   </li>
</ul>

Chaque élément de la liste contient un titre contenu à l'intérieur d'un lien. Le contenu du div est initialement caché par CSS (display:none).

Le CSS :

#menu li{
   list-style: none;
   padding: 0;
   margin: 0;
}

#menu a{
   font-family: sans-serif;
   font-size: 16px;
   color: black;
   font-weight: bold;
   text-decoration: none;
   text-transform: uppercase;
}

#menu div{
   height: 100px;
   width: 200px;
   border: 1px solid gray;
   display: none;
}

Notez que list-style est à "none" pour retirer les points (bullets) de la liste.

La fonction JavaScript (avec jQuery 1.4) :

$j = jQuery.noConflict();

$j(document).ready( initAccordion );

function initAccordion(){
   $j.each($j('#menu li'),
       function(){
           var a = $j(this).find('a');
           var div = $j(this).find('div');

           $j(a).click(
               function(){
                   $j(div).slideToggle();
               }
           );
       }
   );
}

Assez simple non ? Seulement quelques lignes de code à l'intérieur de la fonction initAccordion() pour remplacer jQueryUI et faire tout ce qu'on veut. C'est vrai que notre version est plus limitée en termes d'options et de skin mais elle fait ce qu'on s'attend d'elle. Comme quoi rechercher un plugin à tout prix n'est pas toujours la meilleure solution quand on peut le coder soi-même.