WordPress & jQuery UI – L’accordéon d’article

Beaucoup d’entre vous me demandent comment fabriquer un système d’accordéon avec jQuery et WordPress. Un système en étant un autre. Il y a peu d’article explicatif sur cette méthode, un manque corrigé avec ce tutoriel détaillé.

Avant de commencer, je vous demande d’insérer la librairie jQuery et jQueryUI. Et pour ce faire, je vous renvoi au tutoriel sur jQuery UI.

Avec ces librairies, il est très simple de créer un accordéon. Le plus compliqué, c’est de l’adapter sur WordPress.

Le code avec une boucle WordPress

En sortie votre code devra, stricto sensu, ressembler à ceci :

<div id="accordion">
   <h3><a href="Lien 1">Le titre</a></h3>
   <div>Le contenu</div>

   <h3><a href="Lien 2">Le titre</a></h3>
   <div>Le contenu</div>

   <h3><a href="Lien 3">Le titre</a></h3>
   <div>Le contenu</div>

   <h3><a href="Lien 4">Le titre</a></h3>
   <div>Le contenu</div>
</div>

Pour ce faire, nous allons utiliser le loop de WordPress afin de générer ce code :

<div id="accordion">
<?php query_posts('posts_per_page=5');
while ( have_posts() ) : the_post(); ?>

<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<div><?php the_content(); ?></div>

<?php endwhile;
wp_reset_query();?>
</div>

J’utilise donc la fonction query_posts pour n’afficher que les 5 premiers articles. Libre à vous d’en mettre plus ou moins, ou même de n’afficher les articles que d’une catégorie… Vous n’avez que l’embarra du choix.

Dans le loop, on va retrouver :

• Le titre, qui nous servira à déplier notre accordéon ;
• Le contenu de l’article ;

Du coté du JavaScript, vous devez simplement définir la div #accordion comme étant un accordéon :

jQuery(function() {
	jQuery( "#accordion" ).accordion();
});

Ce code est exempt de toute option. Il est possible d’y ajouter quelques paramètres. Par exemple, je ne veux pas que la hauteur de mon accordéon soit fixée :

jQuery(function() {
jQuery( "#accordion" ).accordion({
autoHeight: false,
navigation: true
});
});

Ou encore que je puisse fermer les onglets en cliquant sur le titre :

jQuery(function() {
	jQuery( "#accordion" ).accordion({
		autoHeight: false,
		navigation: true,
		collapsible: true
	});
});

Ou enfin, je veux que l’accordéon se déplie lors du passage de la souris :

jQuery(function() {
	jQuery( "#accordion" ).accordion({
		autoHeight: false,
		navigation: true,
		event: "mouseover"
	});
});

Attention cette dernière méthode est incompatible avec l’option collapsible… Cela donne des résultats de fonctionnement bizarre ! 🙂

Résultat final

Au final, vous aurez quelque chose dans ce goût :

Dernière remarque importante : s’il vous prenez l’envie de vous amuser à tout “accordéoniser” – ça se dit, oui, sachez qu’il est possible de le faire. J’ai moi-même testé de mettre des accordéons dans des accordéons. Mise à part quelques réglages de style. Tout cela semble harmoniser.

Exemple jQuery Accordéon à télécharger

Je joins le projet dans une archive ZIP librement téléchargeable que vous pouvez utiliser comme un nouveau thème. Bon code à tous !