Créer un site Web accordéon FAQ-tutoriel CSS-php.cn

Créer un site Web accordéon FAQ

WBOY

Libérer： 2024-09-03 13:33:41

original

701 Les gens l'ont consulté

Build a FAQ Accordion Website

Introduction

Bonjour les développeurs ! Je suis ravi de partager mon dernier projet : une application Web FAQ Accordéon. Ce projet est parfait pour ceux qui cherchent à créer une section FAQ interactive et conviviale pour leurs sites Web. C'est un excellent moyen d'améliorer vos compétences en développement front-end en utilisant HTML, CSS et JavaScript tout en créant un composant pratique pouvant être utilisé dans diverses applications.

Aperçu du projet

La FAQ Accordéon est une application Web conçue pour afficher les questions fréquemment posées dans un format extensible et pliable. Avec un design épuré et moderne, il permet aux utilisateurs de cliquer sur une question pour révéler la réponse correspondante. Ce projet montre comment créer une section FAQ interactive qui améliore l'expérience utilisateur en rendant le contenu facilement accessible.

Caractéristiques

Accordéon interactif : les utilisateurs peuvent cliquer sur les questions pour basculer la visibilité des réponses, améliorant ainsi la lisibilité du contenu.
Conception réactive : L'application est entièrement réactive, garantissant une expérience visuelle optimale sur les ordinateurs de bureau et les appareils mobiles.
Icônes dynamiques : les icônes changent pour indiquer si une réponse est développée ou réduite.

Technologies utilisées

HTML : Fournit la structure de l'application FAQ Accordéon.
CSS : stylise l'application pour créer un design épuré et réactif.
JavaScript : gère les éléments interactifs, notamment le développement et la réduction des réponses et le basculement des icônes.

Structure du projet

Voici un aperçu de la structure du projet :

FAQ-Accordion/
├── index.html
├── style.css
└── script.js

Copier après la connexion

index.html : Contient la structure HTML de l'application FAQ Accordéon.
style.css : inclut des styles CSS pour créer un design attrayant et réactif.
script.js : gère les éléments interactifs, tels que le développement et la réduction des réponses et la mise à jour des icônes.

Installation

Pour démarrer le projet, suivez ces étapes :

Cloner le dépôt :

git clone https://github.com/abhishekgurjar-in/FAQ-Accordion.git

Copier après la connexion

Ouvrez le répertoire du projet :
```
cd FAQ-Accordion
```
Copier après la connexion
Exécuter le projet :
- Ouvrez le fichier index.html dans un navigateur Web pour afficher l'application FAQ Accordion.

Usage

Ouvrez l'application dans un navigateur Web.
Cliquez sur une question pour activer/désactiver la visibilité de la réponse.
Développez et réduisez différentes questions pour afficher leurs réponses.
Mettre à jour ou ajouter de nouvelles questions selon vos besoins.

Explication du code

HTML

Le fichier index.html définit la structure de l'application FAQ Accordion, y compris les questions et réponses. En voici un extrait :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FAQ accordion</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./script.js" defer></script>
  </head>
  <body>
    <div class="conatiner">
      <img src="./assets/images/background-pattern-desktop.svg" alt="" />
      <div class="box">
        <h1>
          FAQs
          <span class="imageStar">
            <img src="./assets/images/icon-star.svg" alt=""
          /></span>
        </h1>
        <section class="section">
          <div class="question">
            <h3>Is Frontend Mentor free?</h3>
            <div class="icon-img">
              <img src="./assets/images/icon-plus.svg" alt="" />
            </div>
          </div>
          <div class="answer">
            <p>
              Frontend Mentor offers realistic coding challenges to help
              developers improve their frontend coding skills with projects in
              HTML, CSS, and JavaScript. It's suitable for all levels and ideal
              for portfolio building.
            </p>
          </div>
          <hr />
        </section>
        <section class="section">
          <div class="question">
            <h3>Can I use Frontend Mentor projects in my portfolio?</h3>
            <div class="icon-img">
              <img src="./assets/images/icon-plus.svg" alt="" />
            </div>
          </div>
          <div class="answer">
            <p>
              Yes, Frontend Mentor offers both free and premium coding
              challenges, with the free option providing access to a range of
              projects suitable for all skill levels.
            </p>
          </div>
          <hr />
        </section>
        <section class="section">
          <div class="question">
            <h3>Can I use Frontend Mentor projects in my portfolio?</h3>
            <div class="icon-img">
              <img src="./assets/images/icon-plus.svg" alt="" />
            </div>
          </div>
          <div class="answer">
            <p>
              Yes, you can use projects completed on Frontend Mentor in your
              portfolio. It's an excellent way to showcase your skills to
              potential employers!
            </p>
          </div>
          <hr />
        </section>
        <section class="section">
          <div class="question">
            <h3>
              How can I get help if I'm stuck on a Frontend Mentor challenge?
            </h3>
            <div class="icon-img">
              <img src="./assets/images/icon-plus.svg" alt="" />
            </div>
          </div>
          <div class="answer">
            <p>
              The best place to get help is inside Frontend Mentor's Discord
              community. There's a help channel where you can ask questions and
              seek support from other community members.
            </p>
          </div>
          <hr />
        </section>
      </div>
    </div>

  </body>
</html>

Copier après la connexion

CSS

Le fichier style.css stylise l'application FAQ Accordion, garantissant qu'elle est visuellement attrayante et réactive. Voici quelques styles clés :

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  background-color: hsl(275, 100%, 97%);

}

img {
  width: 100%;
  position: fixed;
}

.container {
  position: absolute;
}

.box {
  top: 100px;
  margin: 0 auto;
  background-color: hsl(0, 0%, 100%);
  max-width: 555px;
  position: relative;
  border-radius: 13px;
  padding: 20px;
}

.imageStar img {
  width: 36px;
  margin-left: 10px;
}

.section {
  padding: 5px;
}

.question {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.answer {
  display: none;
  overflow: hidden;
  padding: 10px;
}

.answer.active {
  display: block;
}

.icon-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-img img {
  position: fixed;
  width: 19px;
}

@media (max-width: 700px) {
  .box {
    max-width: 500px;
  }
}

@media (max-width: 500px) {
  .box {
    max-width: 400px;
  }
}

Copier après la connexion

Javascript

Le fichier script.js contient la fonctionnalité permettant de développer et de réduire les réponses. Voici un extrait pour démonstration :

const questions = document.querySelectorAll(".question");

questions.forEach(question => {
  question.addEventListener("click", () => {
    const answer = question.nextElementSibling;
    const icon = question.querySelector(".icon-img img");

    // Toggle answer visibility
    answer.classList.toggle("active");

    // Change icon
    if (answer.classList.contains("active")) {
      icon.src = "./assets/images/icon-minus.svg";
    } else {
      icon.src = "./assets/images/icon-plus.svg";
    }
  });
});

Copier après la connexion

Démo en direct

Vous pouvez consulter la démo en direct du projet FAQ Accordion ici.

Conclusion

La création de l'application FAQ Accordion a été une expérience enrichissante dans la création d'une section FAQ interactive et conviviale. Ce projet met en évidence l’importance de l’engagement des utilisateurs et de l’accessibilité du contenu. En appliquant HTML, CSS et JavaScript, nous avons développé un composant qui améliore l'expérience utilisateur en rendant les questions fréquemment posées facilement accessibles. J'espère que ce projet vous inspirera pour créer vos propres composants interactifs. Bon codage !