建立一個 FAQ 手風琴網站-css教學-PHP中文網

首頁

web前端

css教學

建立一個 FAQ 手風琴網站

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 03, 2024 pm 01:33 PM

Build a FAQ Accordion Website

介紹

開發者們大家好！我很高興分享我的最新專案：FAQ Accordion Web 應用程式。該專案非常適合那些希望為其網站創建互動式且用戶友好的常見問題解答部分的人。這是使用 HTML、CSS 和 JavaScript 增強前端開發技能的好方法，同時建立可在各種應用程式中使用的實用元件。

項目概況

FAQ Accordion 是一個 Web 應用程序，旨在以可擴展和可折疊的格式顯示常見問題。它採用簡潔現代的設計，允許用戶單擊問題即可顯示相應的答案。該專案展示瞭如何建立互動式常見問題解答部分，透過使內容易於存取來改善使用者體驗。

特徵

互動式手風琴：使用者可以點擊問題來切換答案的可見性，增強內容的可讀性。
響應式設計：應用程式完全回應，確保在桌面和行動裝置上獲得最佳的觀看體驗。
動態圖示：圖示會變更以指示答案是展開還是折疊。

使用的技術

HTML：提供 FAQ Accordion 應用程式的結構。
CSS：設定應用程式的樣式以建立乾淨且響應式的設計。
JavaScript：管理互動元素，包括展開和折疊答案以及切換圖示。

專案結構

以下是項目結構的概述：

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

index.html：包含 FAQ Accordion 應用程式的 HTML 結構。
style.css：包含 CSS 樣式以創造引人入勝且響應式的設計。
script.js：管理互動元素，例如展開和折疊答案以及更新圖示。

安裝

要開始該項目，請按照以下步驟操作：

複製儲存庫：

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

開啟專案目錄:
```
cd FAQ-Accordion
```
運行項目:
- 在 Web 瀏覽器中開啟 index.html 檔案以查看 FAQ Accordion 應用程式。

用法

在網頁瀏覽器中開啟應用程式。
點選問題可切換答案的可見性。
展開和折疊不同的問題以查看他們的答案。
根據需要更新或新增問題。

程式碼說明

超文本標記語言

index.html 檔案定義了 FAQ Accordion 應用程式的結構，包括問題和答案。這是一個片段：


  
    <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>
  
  
    <div class="conatiner">
      <img src="/static/imghwm/default1.png" data-src="./assets/images/background-pattern-desktop.svg" class="lazy" alt="">
      <div class="box">
        <h1>
          FAQs
          <span class="imageStar">
            <img src="/static/imghwm/default1.png" data-src="./assets/images/icon-star.svg" class="lazy" alt=""></span>
        </h1>
        <section class="section">
          <div class="question">
            <h3 id="Is-Frontend-Mentor-free">Is Frontend Mentor free?</h3>
            <div class="icon-img">
              <img src="/static/imghwm/default1.png" data-src="./assets/images/icon-plus.svg" class="lazy" 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 id="Can-I-use-Frontend-Mentor-projects-in-my-portfolio">Can I use Frontend Mentor projects in my portfolio?</h3>
            <div class="icon-img">
              <img src="/static/imghwm/default1.png" data-src="./assets/images/icon-plus.svg" class="lazy" 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 id="Can-I-use-Frontend-Mentor-projects-in-my-portfolio">Can I use Frontend Mentor projects in my portfolio?</h3>
            <div class="icon-img">
              <img src="/static/imghwm/default1.png" data-src="./assets/images/icon-plus.svg" class="lazy" 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="/static/imghwm/default1.png" data-src="./assets/images/icon-plus.svg" class="lazy" 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>

CSS

style.css 檔案設定 FAQ Accordion 應用程式的樣式，確保其具有視覺吸引力和響應能力。以下是一些關鍵樣式：

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

JavaScript

script.js 檔案包含展開和折疊答案的功能。這是示範片段：

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

現場演示

您可以在此處查看 FAQ Accordion 專案的現場演示。

結論

建立 FAQ Accordion 應用程式對於建立互動式且使用者友善的 FAQ 部分來說是一次有益的體驗。該專案強調了用戶參與和內容可訪問性的重要性。透過應用 HTML、CSS 和 JavaScript，我們開發了一個元件，該元件可以透過輕鬆存取常見問題來增強使用者體驗。我希望這個專案能夠激勵您建立自己的互動式元件。快樂編碼！