### 題目
今天要來運用 [Bootstrap 手風琴元件](https://getbootstrap.com/docs/5.3/components/accordion/)，調整客製化樣式，實作第八週 FAQ 區塊


可以嘗試自行製作或是參考下方模板修改 HTML、CSS `...` 的部分

HTML：

<div class="container mt-2">
  <div class="row justify-content-center">
    <div class="col-8">
      <ul class="accordion list-unstyled" id="accordionFAQ">
        <li class="accordion-item">
          <button class="accordion-button collapsed d-block" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <h2 class="accordion-header row fs-6 align-items-center">
              <span class="col-9">
                ALPHABOX+ 的使用方式是什麼？
              </span>
              <span class="col-3">
                <span class="material-icons addIcon fs-40">
                  add
                </span>
                <span class="material-icons removeIcon fs-40">
                  remove
                </span>
              </span>
            </h2>
            <div id="..." class="accordion-collapse collapse row" data-bs-parent="#accordionFAQ">
              <div class="col-9">
                <p class="accordion-body mt-2 mb-0">
                  首先請確保機器人已安裝並連接至Wi-Fi，然後使用專屬的應用程式進行設定。隨後即可透過語音指令或應用程式與機器人進行互動。
                </p>
              </div>
            </div>
          </button>
        </li>
      </ul>
    </div>
  </div>
</div>

SCSS：

body {
  background-color: #e9e2f3;
}

.fs-40 {
  font-size: 40px;
}

.accordion-item, .accordion-button, .accordion-button:not(.collapsed) {
  background-color: transparent;
  color: #1F0F39;
}

.accordion-button {
  color: #1F0F39;
  padding: 32px 0 40px;
  border-bottom: ...;
  &:focus {
    box-shadow: none;
    border-color: #fff;
  }
  &::after {
    content: none;
  }
  .addIcon {
    display: block;
  }
  .removeIcon {
    display: none;
  }
  &:not(.collapsed) {
    .addIcon {
      display: ...;
    }
    .removeIcon {
      display: ...;
    }
  }
}

.accordion-body {
  padding: 0;
}

> 補充：
> [:not()](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:not)：當沒有括號內的選擇器時，呈現樣式

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
https://codepen.io/hexschool/pen/rNoayJp
-->

回報區
---

|#| Discord | CodePen / 答案 |
|:-:|:-------------:|:--------------------------------------------------:|
| 01 | kuanju27 |[Codepen](https://codepen.io/Eero-Chiao/pen/YzdqMyW) |
| 02 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/ExGKJKq) |
| 03 | pinyi_9 |[Codepen](https://codepen.io/Wpypy/pen/qBLZwNd)|
| 04|Michelle0417#3569 |[Codepen](https://codepen.io/michelle0417/pen/WNLwWQz)|
| 05 | Yu |[Codepen](https://codepen.io/yuch3n_chen/pen/abPNxwz)|
| 06 | bf_tsai |[Codepen](https://codepen.io/BF-Tsai/pen/bGOpJaj)|
| 07 | shcopy |[Codepen](https://codepen.io/shcopy/pen/KKbzYJL)|
| 08 | meowmeow |[Codepen](https://codepen.io/snow1224/pen/gOZrJYj)|
| 09 | Moreene |[CodePen](https://codepen.io/Moreene/pen/BavKeQb?editors=1100)|
| 10 | Uli |[CodePen](https://codepen.io/uli1313/pen/oNJxRpd)|
| 11 | ovo.yun |[Codepen](https://codepen.io/yun-the-scripter/pen/poqymmR)|
| 12 | townyuan |[Codepen](https://codepen.io/townyuan/pen/dywMLRp)|
| 13 | lychee_kk |[Codepen](https://codepen.io/kakakala/pen/bGOpJZQ)|
| 14 | hao2485 |[Codepen](https://codepen.io/Seanfeb16/pen/bGOpPqw)|
| 15 | jacky7035 |[Codepen](https://codepen.io/adens123/pen/PoXNvpV)|
| 16 | m_m |[Codepen](https://codepen.io/minnn7716/pen/ZEVWdqj)|
| 17 | Aya |[Codepen](https://codepen.io/NoNameNote/pen/LYMNwrb)|
| 18 | ming0712 |[Codepen](https://codepen.io/StevenHuang/pen/BavzBvB)|
| 19 | hannahTW |[Codepen](https://codepen.io/hangineer/pen/WNLxbBP)|
| 20 | ann6212 |[Codepen](https://codepen.io/yqmegupa-the-styleful/pen/oNJLXNe?editors=1100)|
| 21 | orias_000 |[Codepen](https://codepen.io/qoq77416416/pen/dywXoPV?editors=1100)|
| 22 | yu.t_liu |[Codepen](https://codepen.io/YuT200053/pen/jOXrPgM?editors=1100)|
| 23 | soniawu |[Codepen](https://codepen.io/YUJOU/pen/NWerjaZ)|
| 24 | adele6199 |[Codepen](https://codepen.io/codepen-io-winnie/pen/ZEVOvaP?editors=1100)|
| 25 | runweiting |[Codepen](https://codepen.io/weiting14/pen/LYMZmYP)|
| 26 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/LYMZgme) |
| 27 | Tina02 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/RwEGQyy) |
| 28 | Renee Wang | [Codepen](https://codepen.io/Renee-Wang-2022/pen/ExGKBLG) |
| 29 | 小夏 |[Codepen](https://codepen.io/michaelhsia/pen/NWedNoE?editors=1100)|
| 30 | Long |[Codepen](https://codepen.io/Loonng/pen/VwqpbQa?editors=1100)|
| 31 | wind |[Codepen](https://codepen.io/wind7y/pen/QWzvjyZ)|
| 32 | 歐陽龍龍#1061 |[Codepen](https://codepen.io/dizzydog-rgb/pen/YzdVBNm)|
| 33 | yuan2781 |[Codepen](https://codepen.io/ismebir/pen/qBLPKXx)|
| 34 | tanuki5863 |[Codepen](https://codepen.io/tanuki320/pen/poqaMKa)|
| 35 | patrickpie |[Codepen](https://codepen.io/patrickpie/pen/NWeYQRx?editors=1100)|

* 快速複製

|  |  |[Codepen]()|