Dans ce blog, je vais créer un accordéon en utilisant le javascript natif. Aucune bibliothèque comme jQuery n’est nécessaire. JQueryUI a un composant accordéon intégré, ce qui est génial à utiliser. Mais en tant que développeur responsable, nous devrions aussi savoir comment en créer un avec du pur javascript. Si vous ne savez pas ce qu’est un accordéon, alors regardez celui de jquery ici.
Décomposons le composant en petites étapes.
- L’accordéon contient une liste de panneaux.
- Chaque panneau a deux composants, l’en-tête & le corps.
- Le composant en-tête de tous les panneaux est toujours visible.
- Un panneau peut être développé ou réduit.
- Lorsqu’un panneau est développé, son composant corps devient visible.
- Un seul panneau peut être développé à la fois.
- Quand un autre panneau est développé, le composant de corps du dernier panneau se cache.
Construisons le composant par petites étapes.
Etape 1 :- Concevoir un HTML de base
Créons un html de base qui crée une liste de panneaux avec un en-tête &corps.
Le html ci-dessus contient une liste de panneaux. Chaque panneau a un en-tête et un élément de corps. Actuellement, tout est visible.
Etape2 :- Définir quelques CSS pour gérer la visibilité
Créons deux classes CSS pour définir la visibilité du corps.
Par défaut, nous voulons cacher tout le corps du panneau selon le besoin. Maintenant, nous avons besoin de montrer seulement l’élément étendu à la fois. Nous allons ajouter la classe active dans le div du panneau pour rendre le corps visible.
Étape 3 :- Utilisation de CSS dans le HTML
Après avoir ajouté CSS dans notre HTML, le code sera
Maintenant tout le corps du panneau est caché sauf le premier. Nous avons créé notre composant accordéon de base. Nous devons utiliser un peu de javascript pour le rendre pleinement fonctionnel.
Etape4 :- Ajouter des événements de clic
Nous allons ajouter un événement de clic sur chaque panneau, ce qui changera la visibilité du panneau.
JS Fiddle link here
La fonctioninitAccordion est définie pour initialiser le composant accordéon. Elle place un événement de clic sur chaque panneau. Lorsqu’un panneau est cliqué, elle supprime la classe active du panneau actif actuel et l’ajoute au nouveau panneau. Par défaut, c’est le premier panneau qui est actif. Nous pouvons rendre n’importe quel panneau comme actif par défaut en passant l’élément panel à la fonction showPanel.
Nous avons créé notre accordéon avec succès. C’est juste un modèle très basique d’accordéon mais il couvre la fonctionnalité principale.
Nous pouvons le rendre plus fantaisiste en ajoutant de jolis styles css, des animations et des icônes. Aussi, nous pouvons le rendre plus orienté vers la performance en implémentant la délégation d’événements &mise en cache des éléments actifs actuels. Référez-vous à mon blog sur les événements pour apprendre les événements en détail.