Accordion est un système d'onglets animés en ajax DHTML. Il vient de passer en V2.
Ce système de navigation entre les onglets confère un coté très classe un menu par exemple 
Comme son nom l'indique le changement entre les différents onglets se fait à la manière d'un accordéon. pour mieux vous rendre compte du résultats que cela peu avoir, je vous laisse le soi d'aller regarder la démo du script sur le site officiel de Accordion v2
Comme vous pouvez le voir sur les screenshots ci-dessous les système d'accordéon marche aussi bien horizontalement que verticalement
Screenshots :
Cliquez sur les images pour les voir en grand
Voici ce que vous devez faire pour le faire fonctionner :
Insérez ce code entre les balises <head> et </head>
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/accordion.js"></script>
Il vous faudra utiliser la sémantique ci dessous pour que cela fonctionne
<h2 class="accordion_toggle">Title Bar</h2>
<div class="accordion_content">...</div>
...
<h2 class="accordion_toggle">Title Bar</h2>
<div class="accordion_content">...</div>
Enfin vous pouvez régler les effets en modifiant le script accordion.js
// The speed of the accordion
resizeSpeed : 8,
// The classnames to look for
classNames : {
// The standard class for the title bar
toggle : 'accordion_toggle',
// The class used for the active state of the title bar
toggleActive : 'accordion_toggle_active',
// The class used to find the content
content : 'accordion_content'
},
// If you don't want the accordion to stretch to fit
// its content, set a value here, handy for horixontal examples.
defaultSize : {
height : null,
width : null
},
// The direction of the accordion
direction : 'vertical',
// Should the accordion activate on click or say on mouseover? (apple.com)
onEvent : 'click'
Voilà, faites en bonne utilisation ...
J'adore ce genre de script, cela me donne des idées pour un futur thème par exemple. Et vous, ça vous inspire ?
Suite à la pr"cision de Luc dans les commentaires, j'ai modifié le titre et le billet en conséquence. Merci Luc
