Tutorial JQuery #5 : creer un menu accordeon

Pour aujourd’hui pas de tutorial pour un plugin JQuery mais un tutorial pour créer un menu accordéon tout simple. Je sais qu’il existe des plugins qui permettent de la faire, il n’est pas forcément nécessaire d’alourdir encore la page en sachant qu’on peut le réaliser avec seulement 7 lignes de JavaScript grâce à JQuery !

menu accordeon avec JQuery

Comme d’hab, il est possible d’essayer une démonstration.

Donc pour commencer, il faut intégrer le framework JQuery sur la page :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>

Ensuite on va ajouter le code JQuery qui va permettre d’activer le menu accordéon (les sélecteurs sont entièrement adaptables) :

$(document).ready(function() {
  $('.accordeon').hide(); // on cache tous les textes (blocs ayant la classe accordeon)
  $('h4').click(function() { // si on clique sur un titre (ici tous les éléments contenu en les balises h4)
    $(this).next('div:hidden').slideDown() // on deroule le div caché qui suit directement le titre
    .siblings('div:visible').slideUp(); // et on cache les div similaires qui etait visible
  });
});

Enfin il n’y a plus qu’à faire le code HTML des différents éléments du menu accordéon. Ces éléments seront sous la forme un titre, un bloc, un titre, un bloc. Il ne faut pas oublier d’affecter la classe accordeon à tous les blocs de contenu pour qu’ils soient tous cachés au chargement de la page.

<h4>Avec du texte</h4>
 
 
<!-- premier titre -->
 
<div class="accordeon"><!-- premier bloc de contenu, associé au premier titre -->
	Amiens est une ville française du nord de la France située sur la Somme.
        Administrativement, cette commune est la préfecture de la région de
        Picardie ainsi que du département de la Somme et chef-lieu de canton.
</div>
 
 
<h4>Avec une photo</h4>
 
 
<!-- deuxieme titre -->
 
<div class="accordeon"><!-- deuxieme bloc de contenu -->
	<img src="3.jpg" alt="Metz" width="300" height="225" />
</div>
 
 
<h4>Avec une liste</h4>
 
 
<!-- troisieme titre -->
 
<div class="accordeon"><!-- troisieme bloc de contenu -->
 
<ul>
 
	<li>C'est fou ce qu'on peut mettre dans un menu accordéon !</li>
 
 
	<li><a href="http://blog.arnaud-k.fr">Mon blog</a></li>
 
 
	<li><a href="http://arnaud-k.fr">Mon site</a></li>
 
</ul>
 
</div>

Et c’est tout, rien de bien compliqué au final !

Cette entrée a été publiée dans JQuery, avec comme mot(s)-clef(s) , . Vous pouvez la mettre en favoris avec ce permalien.

23 reponses a Tutorial JQuery #5 : créer un menu accordéon

  1. mi@ge dit :

    Encore un article agréable sur JQuery. Tes commentaires sur chaque ligne rendent le tutoriel vraiment intuitif.

  2. arnaud dit :

    Merci pour ton commentaire. J’essaie de mettre le plus d’explications possibles pour permettre de vraiment comprendre ce que l’on fait !

  3. aminamin dit :

    Ce site est très sympa J’ai aimé tous les sujets.
    Je vous demande de transmettre certains de ses articles sur ce site
    http://www.malak-rouhi.com/vb/

  4. musseau dit :

    Bonsoir!
    Je trouve cela très pratique mais comme je suis une débutante, j’ai juste besoin de savoir ou le script se met (dans la page html?) et ou le javascript se met(dans la page html?) car c’est ce que j’ai fait et cela ne marche pas.
    merci

  5. arnaud dit :

    @musseau, pour plus d’explications, n’hésite pas à aller voir le code de la page de démonstration du tuto (dispo ici http://blog.arnaud-k.fr/menuAccordeon/ ). Pour ça fait un clique-droit puis « afficher la source » ou directement CTRL+U sous Firefox.

    En fait tous les codes javascript que tu veux insérer dans la page HTML doivent être entre les balises :
    <script type= »text/javascript »> et </script>

    PS : Je viens de me rendre compte que le lien vers la démo était éronné, je l’ai corrigé dans le post ci-dessus.

  6. antoineguiral dit :

    Peut être que les listes de définitions auraient étaient sémantiquement plus adaptées pour ce genre d’effets…

    sympa ton blog ;)

  7. Ping : Plugins JQuery en vrac sur unwrongest.com, par Jan Jarfalk | JQuery, PHP, html, design… // arnaud-k : un blog de geek

  8. Ping : Démonstrations : Quatre Menu Accordéons en jQuery « FrameLinks

  9. laure dit :

    Bonjour,

    Est-ce qu’on pourrait ajouter du code dans le script pour que chaque menu se referme si l’on clique dessus et pas seulement si on ouvre un autre menu..si oui, lequel?

    Merci

  10. Damsterdam dit :

    Bonjour,
    je voulais savoir quelle était l’utilité du code «  » dans ton script ? Là où tu insères jQuery… J’ai remarqué ça et c’est la 1ere fois que je le vois (ou y fais attention ^^)
    Merci de ta réponse s’il y a !

    Bye !

  11. Nouben dit :

    Merci pour ce tuto super simple à appréhender pour un débutant comme moi !

    Je l’ai juste complété avec un code péché sur alsacreation pour que les onglets se referment si on clique dessus avec :

    // Si le sous-menu était déjà ouvert, on le referme :
    if ($(this).next(« div:visible »).length != 0) {
    $(this).next(« div.accordeon »).slideUp(« normal »); }
    else { //suite du code

  12. Ping : Menu Yvette Horner en jQuery (menu accordéon) » BlogYann

  13. Nathan dit :

    Bonsoir,

    Alors je préviens…
    Je vais être un véritable boulet…

    Mais je ne comprends rien à rien à ce langage informatique et pourtant j’en ai besoin pour créer le site sur Wiféo :

    Donc pour commencer, il faut intégrer le framework JQuery sur la page :

    * Que veut dire ceci ?

    Ensuite on va ajouter le code JQuery qui va permettre d’activer le menu accordéon (les sélecteurs sont entièrement adaptables) :

    **Puis ceci ?

    Enfin il n’y a plus qu’à faire le code HTML des différents éléments du menu accordéon. Ces éléments seront sous la forme un titre, un bloc, un titre, un bloc. Il ne faut pas oublier d’affecter la classe accordeon à tous les blocs de contenu pour qu’ils soient tous cachés au chargement de la page.

    ***Et pour finir ceci ? ? S’il vous plaît ?

    Désolée… Je n’y comprends rien à rien…

    Bonne soirée.

  14. WibiMaster dit :

    @nathan :
    ben tout est détaillé au-dessus… Intégrer jQuery par exemple, il suffit de mettre le script (fichier .js) de jquery dans un dossier, puis d’écrire  » dans la balise de ta page.. Il suffit presque de faire un simple copier/coller du tutoriel de cette page :/

  15. dubois dit :

    Merci pour ce très beau raccourci de script.

    Dommage qu’Internet Explorer ne prenne pas en compte la propriété ‘-moz-border-radius’ pour les coins arrondis.

  16. stl dit :

    Hello ! Merci pour le script, très bon site !!
    Est-ce que quelqu’un peut me dire où je dois mettre la ligne de code qui permet de refermer le menu quand on clique sur un des items.
    ligne de code citée dans le commentaire de Nouben :)

  17. azedine dit :

    salut super mais si je vx avoir le fichier jquery.min.js sans avois l integrer a partir du site et merci

  18. Gregoire dit :

    Merci pour ces explications et ton site ….hyper utile et clair !
    Par contre, comme je suis debutant, j ai bien reussi a faire un menu deroulant et integrer sous differentes rubriques des liens mais j aimerais, quand je clique sur une des rubrique, qu en plus de l effet deroulant, cela me mette sur une page differente !
    En prenant ton exemple, si je mets un lien au niveau de …..le lien de ne fonctionne pas ! Aurais tu une idee pour essayer d y arriver?

    Merci par avance de ton aide et conseils
    Gregoire

  19. Michel dit :

    Bonjour je n’arrive pas un peu d’aide svp

  20. Thisa dit :

    Moi j’aimerai sur mon site en construction mettre des images comme et des sous images à la place des textes est ce possible??????

  21. Mnemosia dit :

    Hello et merci pour ton tuto extrêmement bien expliqué!
    Simple, efficace et à toutes celles et ceux qui se lancent comme moi dans le fascinant monde du JQuery, hyper facile d’accès … quand on a la jugeote de lire les codes sources des pages…
    Cela dit, j’utilise ton code pour faire apparaître une image cachée par une autre dans la quelles deux liens sont mappés. Je n’ai donc pas d’autres « .accordeon » et après essais faire une fausse seconde div me permettant de « fermer » la première 1) n’est pas concluant stylistiquement parlant (du tout) et 2) c’est tout bonnement pas la solution,
    J’ai essayé d’utiliser le code de Nouben qui proposait une alternative pour fermer une div automatiquement comme dans le tuto de chez Alsacréations mais mon code ne fonctionne pas, après moultes tentatives pour être certaine que cela n’est pas lié au fait que je l’ai mal placé, je suppose donc que c’est parce que je n’ai qu’une seule div.
    Pourrais-tu m’indiquer comment rajouter une commande pour que ma div unique se referme si je reclique dessus et au passage si je peux abuser:
    1) comment faire pour faire un « hover » – je désire superposer en CSS une seconde image sur ma première lorsque je passe ma souris pour faire un effet « d’illumination » de mon image
    2) comment faire pour que le code affiche l’ouverture en horizontal au lien d’en haut?
    En te remerciant par avance de ton coup de main précieux!
    Mnemosia

  22. Dvnk dit :

    Merci pour ce tuto simple et clair !

    Pour ceux qui comme moi cherche à pouvoir fermer l’onglet actif en cliquant dessus, voici le code complet :

    /*********

    MENU ACCORDEON

    *********/

    $(document).ready(function() {

    $(‘.accordeon’).hide(); // on cache tous les textes (blocs ayant la classe texte

    $(‘h4′).click(function() { // si on clique sur un titre

    if ($(this).next(‘div:visible’).length != 0) {
    $(this).next(‘.accordeon’).slideUp(‘normal’); }

    $(this).next(‘div:hidden’).slideDown() // on deroule le div caché qui suit directement le titre

    .siblings(‘div:visible’).slideUp(); // et on cache les div similaires qui etait visible

    });

    });

    Il me reste toutefois un problème : en reprenant le code HTML de la page d’exemple, je n’arrive pas à supprimer l’espace entre chaque titre. Une idée ? Merci !

  23. Dvnk dit :

    C’est bon j’ai trouvé, en rajoutant « margin:0; padding:0″ au h4 !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>