Récemment, lors de la refonte d'un vieux projet, j'ai décidé de mettre à jour jQuery.
Le projet datait d'il y a plus de 2 ans et avait pas mal de versions de retard, donc il était temps de repartir sur une base saine avec jQuery 1.9.

J'ai malheureusement eu la désagréable surprise de découvrir qu'il y avait certains changements dans l'API de jQuery UI, notamment sur le widget « Accordion » avec la disparition pure et simple de l’option navigation qui permettait d’ouvrir la partie de l’ « accordion » comprenant un lien vers la page actuelle.

Ça pouvait notamment être très utile en utilisant des #mots-clés en fin d’URL pour ouvrir les différents éléments de l’ « accordion ».

J’ai donc cherché sur Internet une alternative à cette option, en accord avec la nouvelle API ; mais mes recherches se sont avérées infructueuses, donc j’ai retroussé mes manches et voici la solution !

Tout d’abord le HTML :

<div id="accordion">
    <h2><a href="#accordeon1">Titre 1</a></h2>
    <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
    <h2><a href="#accordeon2">Titre 2</a></h2>
    <div><p>Pellentesque lectus tellus, ullamcorper vitae leo ut, egestas tristique mi.</p></div>
    <h2><a href="#accordeon3">Titre 3</a></h2>
    <div><p>Maecenas neque nibh, porta sit amet pulvinar eu, porta nec enim. Nulla et laoreet ipsum.</p></div>
</div>

Ici, le lien est situé au niveau du header mais ça peut aussi marcher avec un lien dans le contenu.

Et pour le JS :

// On récupère l’URL de la page actuelle. 
// Ici c'est un hash car on reste sur la même URL, mais si vous utilisez une URL différente pour chaque élément, vous pouvez utiliser `window.location.pathname` par exemple
var current = window.location.hash; 

// On cherche si il y a un lien qui correspond à l'URL de la page, puis on récupère son parent. Le parent doit être le premier descendant de l'accordéon, ici c'est un `H2`.
var findToggler = $('#accordion a[href$="' + current +'"]').parent('h2');

var indexToggler;
if(findToggler.length) { // Si on a trouvé un élément correspondant
    indexToggler = findToggler.index('h2'); // On récupère son index - l'index est indispensable pour définir l'onglet à ouvrir
} else {
    indexToggler = 0; // Si on est sur une autre page, on ouvre le premier onglet. On peut éventuellement en ouvrir aucun en utilisant `false`.
}
$('#accordion').accordion({
    heightStyle: "content", 
    active: indexToggler // On utilise la variable pour définir quel élément ouvrir.
});

Et voilà !