Accordeon jQuery 1.9 - remplacer l'option navigation

Depuis la version 1.9 de jQuery UI, l'option "navigation" pour les accordéons a été retirée. Voici une méthode pour la récréer afin de pouvoir ouvrir un accordéon en fonction de la page où l'on se trouve

by oilvier

HTML

<!--<ul id="accordion" class="accordion">
	<li>
		<h2 class="accordion-toggler">
			Accordion 1
		</h2>
		<div class="accordion-body">
			<a href="#link1">Link</a>
		</div>
	</li>
	<li>
		<h2 class="accordion-toggler">
			Accordion 2
		</h2>
		<div class="accordion-body">
			<a href="#link2">Link</a>
		</div>
	</li>
	<li>
		<h2 class="accordion-toggler">
			Accordion 3
		</h2>
		<div class="accordion-body">
			<a href="#link3">Link</a>
		</div>
	</li>
</ul>-->

<div id="accordion">
    <h2><a href="#accordeon1">Titre 1</a></h2>
    <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at nisl iaculis, commodo libero vitae, venenatis massa. Aliquam elementum viverra mauris et posuere.</p></div>
    <h2><a href="#accordeon2">Titre 2</a></h2>
    <div><p>Pellentesque lectus tellus, ullamcorper vitae leo ut, egestas tristique mi. Pellentesque purus arcu, condimentum nec pretium ac, venenatis quis odio. Nunc viverra tellus non augue ornare porttitor a in sapien. Aliquam commodo elit lacus, non luctus ligula commodo id. </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. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque lectus tellus, ullamcorper vitae leo ut, egestas tristique mi.</p></div>
</div>

JavaScript

// 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 findToggler = $('#accordion a[href$="' + current +'"]').parents('li'); // 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.

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.
});