Création d'interfaces d'accordéon réactives

Introduction

Dans ce projet, vous allez apprendre à créer un simple accordéon pliable à l'aide de HTML, CSS et JavaScript. L'accordéon pliable est un élément d'interface utilisateur courant qui permet aux utilisateurs de développer et de réduire des sections de contenu, ce qui en fait une fonctionnalité utile pour afficher des informations de manière compacte et organisée.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer la structure HTML pour l'accordéon pliable
• Comment styliser l'accordéon à l'aide de CSS
• Comment ajouter une interaction à l'accordéon à l'aide de JavaScript

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Créer une interface d'accordéon responsive et visuellement attrayante
• Utiliser JavaScript pour ajouter une interaction et un comportement dynamique à des éléments web
• Intégrer HTML, CSS et JavaScript pour construire un composant web fonctionnel et convivial pour l'utilisateur

Configurer la structure du projet

Dans cette étape, vous allez configurer le projet en ouvrant les fichiers fournis dans l'éditeur.

1. Ouvrez l'éditeur et vous devriez voir les fichiers suivants : index.html, style.css, index.js et jquery-3.6.0.min.js.
2. Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.
3. Ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement la page pour voir le contenu. Cliquez sur une image sur une page qui est réduite, elle ne s'ouvrira pas. Vous pouvez voir cela comme suit :

Ajouter une interaction avec jQuery

Dans cette étape, vous allez ajouter une interaction à l'accordéon à l'aide de jQuery.

1. Ouvrez le fichier index.js dans votre éditeur.
2. Ajoutez le code suivant :

$(".option").click(function () {
  $(".option").removeClass("active");
  $(this).addClass("active");
});

Ce code ajoute un écouteur d'événement de clic à chaque élément .option. Lorsqu'un élément .option est cliqué, le code retire la classe active de tous les éléments .option et ajoute la classe active à l'élément .option cliqué. Cela permettra de réduire ou d'ouvrir l'accordéon selon les besoins.

3. Enregistrez le fichier index.js.
4. Rafraîchissez le navigateur pour voir le résultat final.
5. Cliquez sur les différents options d'accordéon pour voir les ouvrir et les réduire.

L'effet ressemble à ceci :

Félicitations! Vous avez terminé le projet d'accordéon pliable.

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.