Accordéon complexe en jQuery

Mettre en place un accordéon en jQuery est assez simple si la structure est contrôlée. La plupart du temps, un déclencheur sur lequel on clique, et qui ouvre la div suivante, laquelle contient ce qu’il faut cacher/montrer.

Mais que faire si l’on ne maitrise pas la dite structure, et que l’on veut jouer sur tout ce qui suit le déclencheur, jusqu’au suivant, sans que tout ceci soit enrobé d’une div?

Accordéon de base…

Voyons déjà comment gérer la solution idéale, celle que l’on maîtrise totalement.

Structure html

Typiquement, nous mettrons le tout dans une div enveloppante (ici avec une classe accordeon) qui alternera des <h4> (déclencheur) qui ouvriront les <div> suivantes (avec une classe « soufflet »)

<div class="accordeon">
    <h4>CLICK ICI accordeon A</h4>
        <div class="soufflet">...</div>
    <h4>CLICK ICI accordeon B</h4>
        <div class="soufflet">...</div>
    <h4>CLICK ICI accordeon C</h4>
        <div class="soufflet">...</div>
</div>

Et son jQuery

Ensuite, ne reste qu’à glisser quelques lignes de jQuery (et sans plugin):

jQuery(document).ready(function() {
   $('.accordeon div.soufflet').hide();
   $('.accordeon h4').toggle(
      function(){  $(this).next('div.soufflet').slideDown(); }
      ,
      function(){ $(this).next('div.soufflet').slideUp(); }
   );
});

La première ligne sert à cacher les soufflets (qui seront visibles par défaut, pour préserver l’accessibilité des quelques rares qui n’ont pas JavaScript).

Suit un toggle qui alternera l’ouverture et la fermeture.

Voir la démo ici même…

Simple, efficace…

Quand les choses se gâtent

Dans l’hypothèse qui nous préoccupe (qui m’a été soumise par Marie R. une ancienne élève), nous avons une structure plus complexe, mais plus réaliste aussi. En l’occurrence un déclencheur suivi d’une série de balises qui ne sont contenues dans rien.

Avec impossibilité de changer cette structure, issue d’un CMS.

Structure html

Illustrons ceci, dans une classe bandoneon (pour éviter les conflits…)

<div class="bandoneon">
    <h4>CLICK ICI bandoneon A</h4>
        <p>Lorem</p>
        <p>Ipsum</p>
    <h4>CLICK ICI bandoneon B</h4>
        <ul><li>a</li><li>b</li><li>c</li></ul>
    <h4>CLICK ICI bandoneon C</h4>
        <table><tr><td>1</td><td>2</td><td>3</td></tr></table>
</div>

Nous n’avons donc rien après les <h4>, que des structures hétéroclites (pouvant être des <p>, des <table>, des <ul> ou toute autre balise, voire séries de balises bien sûr.)

Le jQuery… écrire moins, faire plus ?

Première piste, ajouter une classe à toute les balises sauf les <h4> contenue dans bandoneon, le problème se posant alors pour ouvrir les éléments. Lesquels? Ceux qui suivent le déclencheur jusqu’au prochain déclencheur? Pas si simple, et je n’ai pas réussi à trouver un résultat probant (outre que visuellement c’était assez spécial).

La seule solution (théorique) reste la plus logique: comment rajouter des <div> pour encadrer notre contenu global?

J’ai d’abord cherché autour des fonctions wrap, wrapInner, append et autres. Sans résultat probant non plus.

Ne reste plus qu’à créer le code soi même…

Le principe est assez simple:

• On récupère le contenu html de notre div bandoneon, afin de disposer d’une chaine de caractères, manipulable
• On découpe la chaine suivant une balise à définir (<h4> dans notre hypothèse)
• Et on reconstitue notre contenu, en ajoutant au passage les <div class=soufflet> après chaque </h4>, et des </div> avant chaque (sauf le premier bien sûr).

Ce qui nous donne donc:

$('.bandoneon').html( function ( i, html ) {
   var ouverture = '<h4>';
   var fermeture = '</h4>';
   var final = ''; 
   html = html.split( ouverture ); 
   var nombre = $(html).length; 
   $(html).each(function(j, valeur){
      if ( j > 0) {
         ligne = valeur.split( fermeture );
         final = final + ligne[0] + fermeture+'\n';
         final = final + '<div>' + ligne[1] + '</div>\n';
      }
      if (j < nombre-1) final = final + ouverture;
   });
   $('.bandoneon').html( final );
});

Voir la démo (avec son code source, commenté).

Notons que faire un chercher/remplacer dans la chaine aurait pu être possible, mais difficile de gérer le fait que le premier doit être différent des autres…

Ne reste plus qu’à ajouter le bout de code pour gérer l’ouverture et la fermeture, qui ressemble comme deux gouttes d’eau à son petit frère (en changeant la classe, bien sûr):

$('.bandoneon div.soufflet').hide();
$('.bandoneon h4').toggle(
   function(){  $(this).next('div.soufflet').slideDown(); }
   ,
   function(){ $(this).next('div.soufflet').slideUp(); }
);

Et voilà!

Bon, j’imagine que si le contenu est volumineux, les performances risquent d’être assez mauvaises, mais on a rien sans rien, non?