Pour optimiser la taille d'une page, on peut réduire la place que prennent plusieurs contenus qui s'enchainent en les affichant avec un système d'accordéon. Les contenus sont pliés et l'utilisateur peut cliquer sur des éléments titrés afin de déplier les contenus qui l'intéresse.
Plier des contenus avec le plugin "Accordion"
Le plugin "Accordion" est un mixe de quelques règles CSS3 et d'un script JavaScript.
- La CSS applique l'effet d'animations et masque les débordements de contenus, et une règle supplémentaire permet de plier les contenus au chargement du script, ce qui permet de les laisser ouverts si le script n'a pas été chargé
- Le JavaScript, quant à lui, permet d'actionner les ouvertures et fermetures des contenus au clics sur les éléments titrés
Voici un exemple d'insertion du plugin "Accordion" dans une page :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<!-- Insertion des règles CSS "Accordion" dans la page -->
<style>
.accordion-head,
.accordion-inner,
.accordion-content { overflow: hidden; } /* masque les débordement de contenus */
.accordion-inner { transition: height 1s; } /* applique l'animation de plier / déplier */
.accordion-binded .accordion-inner { height: 0; } /* plie les contenus dès que le script a été chargé */
</style>
<!-- Insertion du plugin "Accordion" dans la page -->
<script src="Accordion.js"></script>
</head>
<body>
<!-- CONTENU -->
</body>
</html>Structure des contenus en accordéon
Chaque contenu à afficher en accordéon doit respecter une structure de base constituée de 4 balises HTML avec un attribut "class" prédéfini :
- "accordion" : délimite les éléments de l'accordéon
- "accordion-head" : délimite les éléments de titres
- "accordion-inner" : délimite le conteneur dont la taille sera modifiée
- "accordion-content" : délimite les contenus à plier / déplier
Voici un exemple de structure avec des balises "DIV" :
...
<div class="accordion">
<div class="accordion-head">
<h3>ENTÊTE</h3>
</div>
<div class="accordion-inner">
<div class="accordion-content">
<p>CONTENU</p>
</div>
</div>
</div>
...Utilisation du plugin "Accordion"
Le script "Accordion" est une fonction JavaScript qui prend en charge deux arguments :
- le premier argument (obligatoire) correspond aux conteneurs "accordion"
- le second argument (optionnel) est une fonction de type "callback" qui permet d'exécuter un code à chaque action de plier / déplier
Voici un exemple d'utilisation de la fonction "Accordion" avec ces deux éléments de paramétrage :
...
<script>
// liste les conteneurs à afficher en accordéons
var accordions = document.querySelectorAll('.accordion');
// code à exécuter à chaque action
var callback = function(element) {
console.log('Élément cliqué :', element);
};
// conteneurs et code passés en arguments de la fonction "Accordion"
Accordion(accordions, callback);
</script>
...Exemple complet et téléchargement
C'est la fin de cet article, vous pouvez optimiser la taille des contenus de vos pages avec le plugin "Accordion" à disposition via le bouton de téléchargement suivant :)
Cet article vous a-t-il été utile ?
Super :)
Merci d'avoir donné votre avis !
Oups :(
Merci d'avoir donné votre avis qui va nous permettre de nous améliorer !