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 :

Exemple d'effet accordéon avec une boucle WordPress
Exemple d’effet accordéon avec une boucle WordPress

 

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

jQuery & WordPress avec effet accordéon

Un thème WordPress incorporant jQuery Accordéon.

Taille : 114,1 KiB  •  Date : 13 avril 2012 •  Hits : 1 449

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

10 commentaires

  1. chokocho

    Bonjour,
    Cet article tombe à point, c’est exactement ce que je cherchais ! merci.
    Une petite question, où fait-il inscrire les lignes de scripts ?
    <script type="text/javascript" src="/js/jquery-1.7.1.min.js »>
    <script type="text/javascript" src="/js/jquery-ui-1.8.18.custom.min.js »>
    <script type="text/javascript" src="/js/jQueryAnimations.js »>

    Dans le header.php même si l’accordéon ne concerne qu’une page statique en particulier ?

    Ensuite, j’ai mis en place un modèle de page « accordeon.php » pour cette page précise, penses-tu que ce soit la bonne méthode ?

    Merci pour tes réponses (et ton temps !)

  2. Terry

    Bonjour,

    et merci beaucoup pour ce tutoriel qui va à l’essentiel.
    J’ai néanmoins un petit soucis car chez moi rien ne se passe. J’ai un blog de voyage de noces pour famille et amis et je souhaiterais qu’au lieu d’avoir une enfilade de pages sur la largeur du menu, je puisse avoir un accordéon type mouse-over afin que les personnes puissent survoler la page parente la plus haute et sélectionner les enfants. Or, ayant suivi scrupuleusement le code, malheureusement rien ne se passe. Je ne sais pas non plus où ajouter le lien source vers la library. Dans la logique je dirais dans le header puisque le script doit s’exécuter dans la boucle qui y est présente, suis je sur la bonne voie? Merci beaucoup si tu prends quelques minutes pour me répondre. Cordialement,
    Terry

  3. lethys

    Bonsoir !
    Merci beaucoup pour ce tuto très utile
    Je cherche à réaliser ce même exploit ; Quelqu’un saurait-il comment s’y prendre pour que « l’accordéon » se déroule de gauche vers la droite, par hasard? Merci encore !
    lethys

    1. Vanessa

      Bonjour,
      Avez vous eu une réponse? car je souhaite moi aussi faire un accordéon de gauche à droite.
      Sinon merci beaucoup de ce tutoriel bien sympathique.

  4. Tok

    Bonsoir,
    Merci pour ce tutoriel! J’aurais une question concernant l’affichage de l’accordéon. il se déplie sur le dernier article. Ce n’est pas possible d’avoir un accordéon qui ne se déplie pas au chargement de la page? Merci.

  5. hurricanIGON

    Bonsoir,
    très bon tutoriel en effet et vraiment bien expliqué, ça fait plaisir. Merci.
    J’aimerais juste savoir si il était possible de sélectionner des articles bien précis à afficher. En effet, tout mes accordéons de fabriquer contiennent tous les mêmes articles par page.
    Merci beaucoup pour toutes explications précieuses.

  6. Nono

    Rebonjour!
    Ce message fait suite au précédent message! Au fait j’ai un message d’erreur qui s’affiche sous IE : Demande d’accès à la méthode ou aux propriétés inattendue.
    Là je fait des recherches mais je n’ai pas trouvé de réponses à par déclarer dans le header mais cela ne fonctionne pas pour moi.
    Quelqu’un aurait une idée? Merci!!!!

Laisser un commentaire