Erstellen Sie eine FAQ-Akkordeon-Website-CSS-Tutorial-php.cn

Build a FAQ Accordion Website

Einführung

Hallo Entwickler! Ich freue mich, mein neuestes Projekt vorzustellen: eine FAQ Accordion-Webanwendung. Dieses Projekt ist perfekt für diejenigen, die einen interaktiven und benutzerfreundlichen FAQ-Bereich für ihre Websites erstellen möchten. Dies ist eine großartige Möglichkeit, Ihre Frontend-Entwicklungsfähigkeiten mithilfe von HTML, CSS und JavaScript zu verbessern und gleichzeitig eine praktische Komponente zu erstellen, die in verschiedenen Anwendungen verwendet werden kann.

Projektübersicht

Das FAQ-Akkordeon ist eine Webanwendung, die dazu dient, häufig gestellte Fragen in einem erweiterbaren und reduzierbaren Format anzuzeigen. Mit einem klaren und modernen Design ermöglicht es Benutzern, auf eine Frage zu klicken, um die entsprechende Antwort anzuzeigen. Dieses Projekt zeigt, wie man einen interaktiven FAQ-Bereich erstellt, der die Benutzererfahrung verbessert, indem Inhalte leicht zugänglich gemacht werden.

Merkmale

Interaktives Akkordeon: Benutzer können auf Fragen klicken, um die Sichtbarkeit der Antworten umzuschalten und so die Lesbarkeit des Inhalts zu verbessern.
Responsives Design: Die Anwendung reagiert vollständig und gewährleistet so ein optimales Seherlebnis sowohl auf Desktop- als auch auf Mobilgeräten.
Dynamische Symbole: Die Symbole ändern sich, um anzuzeigen, ob eine Antwort erweitert oder reduziert ist.

Verwendete Technologien

HTML: Stellt die Struktur für die FAQ-Akkordeon-Anwendung bereit.
CSS: Gestaltet die Anwendung so, dass ein klares und ansprechendes Design entsteht.
JavaScript: Verwaltet die interaktiven Elemente, einschließlich Erweitern und Reduzieren von Antworten und Umschalten von Symbolen.

Projektstruktur

Hier ein Überblick über die Projektstruktur:

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

Nach dem Login kopieren

index.html: Enthält die HTML-Struktur für die FAQ Accordion-Anwendung.
style.css: Enthält CSS-Stile, um ein ansprechendes und ansprechendes Design zu erstellen.
script.js: Verwaltet die interaktiven Elemente, wie z. B. das Erweitern und Reduzieren von Antworten und das Aktualisieren von Symbolen.

Installation

Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:

Klonen Sie das Repository:

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

Nach dem Login kopieren

Öffnen Sie das Projektverzeichnis:
```
cd FAQ-Accordion
```
Nach dem Login kopieren
Führen Sie das Projekt aus:
- Öffnen Sie die Datei index.html in einem Webbrowser, um die FAQ Accordion-Anwendung anzuzeigen.

Verwendung

Öffnen Sie die Anwendung in einem Webbrowser.
Klicken Sie auf eine Frage, um die Sichtbarkeit der Antwort umzuschalten.
Erweitern und reduzierenverschiedene Fragen, um ihre Antworten anzuzeigen.
Aktualisieren oder fügen Sie neue Fragen hinzu nach Bedarf.

Code-Erklärung

HTML

Die Datei index.html definiert die Struktur der FAQ Accordion-Anwendung, einschließlich Fragen und Antworten. Hier ist ein Ausschnitt:

<!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>

Nach dem Login kopieren

CSS

Die style.css-Datei gestaltet die FAQ-Accordion-Anwendung und stellt so sicher, dass sie optisch ansprechend und reaktionsfähig ist. Nachfolgend sind einige wichtige Stile aufgeführt:

* {
  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;
  }
}

Nach dem Login kopieren

JavaScript

Die Datei script.js enthält die Funktionalität zum Erweitern und Reduzieren von Antworten. Hier ist ein Ausschnitt zur Demonstration:

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";
    }
  });
});

Nach dem Login kopieren

Live-Demo

Sie können sich hier die Live-Demo des FAQ-Akkordeon-Projekts ansehen.

Abschluss

Der Aufbau der FAQ Accordion-Anwendung war eine lohnende Erfahrung bei der Erstellung eines interaktiven und benutzerfreundlichen FAQ-Bereichs. Dieses Projekt unterstreicht die Bedeutung der Benutzereinbindung und der Zugänglichkeit von Inhalten. Durch die Anwendung von HTML, CSS und JavaScript haben wir eine Komponente entwickelt, die das Benutzererlebnis verbessert, indem sie häufig gestellte Fragen leicht zugänglich macht. Ich hoffe, dass dieses Projekt Sie dazu inspiriert, Ihre eigenen interaktiven Komponenten zu erstellen. Viel Spaß beim Codieren!

Credits

Dieses Projekt wurde als Teil meiner kontinuierlichen Lernreise in der Webentwicklung entwickelt.

Autor

Abhishek Gurjar
- GitHub-Profil

Das obige ist der detaillierte Inhalt vonErstellen Sie eine FAQ-Akkordeon-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!