首頁 > 文章 > web前端 > 建立一個 FAQ 手風琴網站

建立一個 FAQ 手風琴網站

WBOY原創: 2024-09-03 13:33:41665瀏覽

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 應用程式的結構，包括問題和答案。這是一個片段：

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7FAQ accordion6e916e0f7d1e588d4f442bf645aedb2f
    d8b7823904473d155afe66ded7e78f93
    5de102113aede4703971b3b780c58efb2cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    7f673eaf394f0b5c3dca2aceb68a12d5
      ca5768eb787de1bcd21f5c4158b542b2
      8f9e4409b06fde1ff1d3a80f075ca0ed
        4a249f0d628e2318394fd9b75b4636b1
          FAQs
          a6d6d8732e7aab09e58fc20552ce9c66
            473be947d5c9cf409521472bde60f1a854bdf357c58b8a65c66d7c19c8e4d114
        473f0a7621bec819994bb5020d29372a
        d13b48bd4967f80660c6a04fe1b8824c
          17414f1b537c801ab0729a61553cc1ca
            684271ed9684bde649abda8831d4d355Is Frontend Mentor free?39528cedfa926ea0c01e69ef5b2ea9b0
            07e90b323838b387931d6dbf6680ca9e
              e5f2a86ab908242660e95bdf084ea432
            16b28748ea4df4d9c2150843fecfba68
          16b28748ea4df4d9c2150843fecfba68
          56c581cafed1e2f84ea91e1c5413333f
            e388a4556c0f65e1904146cc1a846bee
              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.
            94b3e26ee717c64999d7867364b1b4a3
          16b28748ea4df4d9c2150843fecfba68
          231a563c997aa9e3e0ae614bd16728b0
        4d7ab0de9a42de71c682b0860bad1410
        d13b48bd4967f80660c6a04fe1b8824c
          17414f1b537c801ab0729a61553cc1ca
            684271ed9684bde649abda8831d4d355Can I use Frontend Mentor projects in my portfolio?39528cedfa926ea0c01e69ef5b2ea9b0
            07e90b323838b387931d6dbf6680ca9e
              e5f2a86ab908242660e95bdf084ea432
            16b28748ea4df4d9c2150843fecfba68
          16b28748ea4df4d9c2150843fecfba68
          56c581cafed1e2f84ea91e1c5413333f
            e388a4556c0f65e1904146cc1a846bee
              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.
            94b3e26ee717c64999d7867364b1b4a3
          16b28748ea4df4d9c2150843fecfba68
          231a563c997aa9e3e0ae614bd16728b0
        4d7ab0de9a42de71c682b0860bad1410
        d13b48bd4967f80660c6a04fe1b8824c
          17414f1b537c801ab0729a61553cc1ca
            684271ed9684bde649abda8831d4d355Can I use Frontend Mentor projects in my portfolio?39528cedfa926ea0c01e69ef5b2ea9b0
            07e90b323838b387931d6dbf6680ca9e
              e5f2a86ab908242660e95bdf084ea432
            16b28748ea4df4d9c2150843fecfba68
          16b28748ea4df4d9c2150843fecfba68
          56c581cafed1e2f84ea91e1c5413333f
            e388a4556c0f65e1904146cc1a846bee
              Yes, you can use projects completed on Frontend Mentor in your
              portfolio. It's an excellent way to showcase your skills to
              potential employers!
            94b3e26ee717c64999d7867364b1b4a3
          16b28748ea4df4d9c2150843fecfba68
          231a563c997aa9e3e0ae614bd16728b0
        4d7ab0de9a42de71c682b0860bad1410
        d13b48bd4967f80660c6a04fe1b8824c
          17414f1b537c801ab0729a61553cc1ca
            684271ed9684bde649abda8831d4d355
              How can I get help if I'm stuck on a Frontend Mentor challenge?
            39528cedfa926ea0c01e69ef5b2ea9b0
            07e90b323838b387931d6dbf6680ca9e
              e5f2a86ab908242660e95bdf084ea432
            16b28748ea4df4d9c2150843fecfba68
          16b28748ea4df4d9c2150843fecfba68
          56c581cafed1e2f84ea91e1c5413333f
            e388a4556c0f65e1904146cc1a846bee
              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.
            94b3e26ee717c64999d7867364b1b4a3
          16b28748ea4df4d9c2150843fecfba68
          231a563c997aa9e3e0ae614bd16728b0
        4d7ab0de9a42de71c682b0860bad1410
      16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68

  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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，我們開發了一個元件，該元件可以透過輕鬆存取常見問題來增強使用者體驗。我希望這個專案能夠激勵您建立自己的互動式元件。快樂編碼！

製作人員

這個專案是我在 Web 開發方面持續學習之旅的一部分。

作者

阿布舍克·古賈爾
- GitHub 簡介

以上是建立一個 FAQ 手風琴網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css html for while format Directory using JS this display github

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：您知道何時使用每種類型的選擇器進行有效的 Web 開發嗎？下一篇：您知道何時使用每種類型的選擇器進行有效的 Web 開發嗎？

看更多