Affichage en accordéon

Auteur : Julien Theler - www.twiip.ch
Contact :
Licence : CC-by-nc
Retour à la liste des scripts
1. Description Ce script, composé de deux fonctions javascript et d'un peu de CSS, permet un affichage de plusieurs zones pouvant être déroulées et enroulées par un click, en accordéon (les autres zones sont refermées lors de l'affichage).
2. Fichiers nécessaires accordion.js (télécharger) : contient les deux fonctions javascript gérant l'effet
accordion.css (télécharger) : contient du style donné aux éléments. Seuls deux propriétés sont indispensables (elles sont indiquées par des commentaires dans le fichier), le reste sert à la présentaiton et peut être modifié à volonté.
3. Configuration Aucune configuration nécessaire.
4. Utilisation Chaque zone déroulable est identifiée par la classe "accordion", contenant un élément de type block (dans l'exemple des h2, mais des div feraient également l'affaire) et un paragraphe contenant la zone à afficher/masquer : <div class="accordion"> <h2 onClick="accordion(this.parentNode);">Titre visible</h2> <p> Texte masqué, affiché lors du click sur le titre. </p> </div>
5. Exemples

Premier élément

L'ornithorynque (Ornithorhynchus anatinus) est une petite espèce de mammifère semi-aquatique endémique vivant dans l'est de l'Australie, y compris en Tasmanie. C'est l'une des 5 espèces de l'ordre des monotrèmes, les seuls mammifères qui pondent des œufs au lieu de donner naissance à des petits vivants (les 4 autres espèces sont des échidnés).

Second élément

L'apparence bizarre de ce mammifère pondant des œufs, muni de crochets venimeux, à bec de canard, à queue de castor et à pattes de loutre a fortement surpris les premiers explorateurs qui l'ont découvert et bon nombre de naturalistes européens ont cru à une plaisanterie. C'est l'un des rares mammifères venimeux : le mâle porte un aiguillon sur les pattes postérieures qui peut libérer du venin capable d'infliger de vives douleurs à un être humain.

Et un dernier élément pour le test

L'apparence bizarre de ce mammifère pondant des œufs, muni de crochets venimeux, à bec de canard, à queue de castor et à pattes de loutre a fortement surpris les premiers explorateurs qui l'ont découvert et bon nombre de naturalistes européens ont cru à une plaisanterie. C'est l'un des rares mammifères venimeux : le mâle porte un aiguillon sur les pattes postérieures qui peut libérer du venin capable d'infliger de vives douleurs à un être humain.