Un bloc accordéon est une méthode excellente pour fournir à un visiteur une grande quantité d’informations sur une seule page sans afficher l’ensemble du texte, ce qui permet de conserver l’interface utilisateur propre et bien organisée.
Un accordéon rempli d’informations peut être créé à partir d’un code HTML, CSS et JavaScript qui afficheront plusieurs onglets dans l’accordéon qui s’ouvriront au clic ou au survol de chaque onglet, dévoilant ainsi les informations qu’il contient.
Si vous n’êtes pas à l’aise avec l’utilisation de code HTML ou JavaScript, vous pouvez faire appel à un développeur HTML qui créera pour vous le bloc accordéon dont vous avez besoin.
Dans ce tutoriel, nous vous guiderons à travers la création d’un bloc accordéon en HTML et qui sera responsive pour s’adapter à toutes les tailles d’écrans.
Sommaire :
Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.
Trouver un développeur web
Créer un bloc accordéon en HTML
Lorsqu’on crée un bloc accordéon, il y aura 3 codes différents qui interviendront dans le processus de création à savoir un code en HTML, un code en CSS et un dernier en JavaScript.
Chacun de ces codes aura son utilité et les trois ensembles vous donneront un code complet et utilisable que vous pourrez intégrer à n’importe quel site pour avoir un bloc accordéon responsive et moderne.
Voyons de suite comment créer un bloc accordéon avec du code comme celui ci :
See the Pen
Bloc Accordéon HTML by Codeur.com (@codeur-com)
on CodePen.
Création de la structure du bloc accordéon en HTML
Le code HTML représentera la structure de base de l’accordéon où seront définis les en-têtes d’onglets et le contenu associé à chaque onglet qui s’ouvrira ensuite par un clic de l’utilisateur.
La balise « div » ayant pour attribut de class « accordion-container » représente la structure entière de l’accordéon. Dedans, on y trouvera plusieurs onglets de l’accordéon représentés par un couple de balises « div » avec pour attribut class « accordion-header » et « accordion-content » qui sont respectivement l’en-tête de l’onglet et le contenu de l’onglet qui sera caché.
La balise « link » sert quant à elle à récupérer l’icône de flèche à partir d’une librairie nommée font-awesome. Ces flèches sont affichées avant l’en-tête d’un onglet sous la forme de « <i class= »fa fa-angle-right »> ».
L’ajout d’une flèche qui indique l’ouverture ou la fermeture d’un onglet est facultatif, mais apporte un plus à l’expérience utilisateur et donne un aspect plus professionnel et moderne à l’accordéon. Vous pouvez néanmoins remplacer la flèche par une autre icône ou une alternative à la librairie si vous souhaitez faire appel à un minimum de ressources externes sur votre site.
See the Pen
Bloc Accordéon HTML by Codeur.com (@codeur-com)
on CodePen.
Définition du style et de l’apparence de l’accordéon en CSS
Le code CSS présenté ci-dessous est à placer après le code HTML et permet de définir le style et l’apparence de l’accordéon. En utilisant les classes CSS définies dans le code HTML, il est possible de styliser les en-têtes et le contenu des onglets.
Dans un code HTML, le code CSS doit être présenté entre des balises « style », mais vous pouvez écrire ensuite le même code que si vous vous trouviez dans un fichier CSS. D’ailleurs, si vous le souhaitez il est aussi possible de séparer le code CSS dans un fichier « .css » et de lier ce fichier au code HTML avec un lien « stylesheet ».
Le bloc de code pour la classe « .accordion-header » comprend l’apparence générale des en-têtes de l’accordéon. On y définit la couleur de fond, la couleur et taille des textes, l’apparence du curseur ou encore la durée des transitions à l’ouverture d’un onglet. Le second bloc suivi de « :hover » pour cette même classe permet de modifier la couleur de fond au survol de la souris pour mieux visualiser quel onglet est pointé.
Le bloc « .accordion-header i » ajoute une marge à l’icône pour qu’il ne soit pas affiché directement avant le texte de l’en-tête.
Enfin, le bloc de la classe « .accordion-content » contient tout le style du contenu de chaque onglet. Pour faire disparaître le contenu de l’accordéon, on utilise notamment les deux propriétés CSS suivantes :
- max-height: 0;
- overflow: hidden;
Ce code reste basique et peut être personnalisé pour mieux correspondre éventuellement à l’apparence globale de votre site.
Pour finir, les différents blocs contenus dans les media queries « @media » permettent d’adapter la taille des en-têtes dans l’accordéon selon la résolution de l’appareil utilisé pour consulter le site web pour une meilleure expérience utilisateur et lisibilité du bloc accordéon.
See the Pen
Bloc Accordéon HTML by Codeur.com (@codeur-com)
on CodePen.
Contrôle de l’accordéon en JavaScript
Le code JavaScript est une partie importante du bloc accordéon puisque c’est ce code qui sera à l’origine du fonctionnement même de l’accordéon. En effet, le code JavaScript qui s’intègre entre des balises « script » dans un code HTML va permettre d’ajouter des évènements au code et engendrer des actions dans certaines conditions.
Le code JavaScript suivant va donc réagir à un évènement qui se trouve être un clic sur l’un des onglets de l’accordéon par un utilisateur avec l’évènement « header.addEventListener(« click », function() », ce qui aura pour action de rendre le contenu de l’onglet visible.
Pour cela, on récupère l’élément suivant de l’en-tête, qui est son contenu, dans la constante « content ». On lui applique une hauteur maximale définie par la hauteur du contenu pour ouvrir l’onglet et dévoiler le contenu avec l’instruction « content.style.maxHeight = content.scrollHeight + « px »; ».
Pour refermer l’onglet, il suffira de supprimer la hauteur maximale du contenu avec l’instruction « content.style.maxHeight = null; »
L’icône est aussi modifiée pour correspondre à l’ouverture ou à la fermeture de l’onglet.
See the Pen
Bloc Accordéon HTML by Codeur.com (@codeur-com)
on CodePen.
Pourquoi créer un bloc accordéon en HTML ?
Les blocs accordéon sont souvent utilisés sur les sites web pour apporter des informations complémentaires aux informations principales aux visiteurs sans impacter la lisibilité de la page.
En cachant le contenu présent dans l’accordéon, qui ne se dévoile que lorsque l’utilisateur effectue une action, les pages de votre site seront moins longues et compliquées à parcourir. Cela permet aussi de cacher ces informations complémentaires et de ne les afficher qu’aux visiteurs qui seront intéressés à ces visiteurs.
L’accordéon permet donc de ne pas surcharger une page en texte et de privilégier l’expérience utilisateur sur une page.
De plus, vous pouvez intégrer Google Tag Manager pour suivre l’activité du bloc accordéon et mesurer le nombre de clics sur l’accordéon et ainsi évaluer si l’accordéon est attractif ou non.
Notre astuce pour créer un bloc accordéon en HTML
Vous êtes désormais en mesure de créer un bloc accordéon qui s’intégrera parfaitement aux pages de votre site web. Ce bloc accordéon créé en HTML, CSS et JavaScript fonctionnera pour n’importe quel site, il peut être personnalisé selon vos envies ou l’apparence générale du site.
Si vous avez besoin d’un accordéon plus complexe ou que vous aimeriez avoir de l’aide pour personnaliser le bloc accordéon, n’hésitez pas à poster une annonce gratuite sur Codeur.com pour trouver rapidement l’aide d’un freelance qui pourra vous aider à coder un bloc accordéon personnalisé en HTML pour votre site.
