11

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

le 5 mai 2009

tags tags : ,

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 !

tags catégorie : JQuery