# 🏅 Day 48 - Bootstrap Accordion

## Accordion

[手風琴元件](https://getbootstrap.com/docs/5.3/components/accordion/) 其功能為點擊按鈕後，下方之區塊會被打開，在許多 Q&A 的網頁很常使用這個元件。

此元件開啟之方式與 Modal 相同，是使用 id 的方式指定開啟目標，所以當一個按鈕想要開啟兩個以上的內容時，也是可以做到的。

### 題目

本次作業需實作課程影片區塊

請依照 [文件](https://getbootstrap.com/docs/5.3/components/accordion/) 將 [模板](https://codepen.io/jmimiding4104/pen/yLdKZYP?editors=1010) 中的 *** 處貼上符合的內容(按鈕與該表單屬性內容為 *** 有四處、圓角依據打開與關閉之情況下會有變化 CSS *** 三處、Material Icons 載入之方式 CSS *** 兩處)，完成以下目的：

1.將按鈕與表單內容對應，能成功點擊按鈕後啟動與關閉表單。

2.預設當進入時，第一個表單內容是打開的。

## 回報流程

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


<!-- 解答：
https://codepen.io/jmimiding4104/pen/YzoawJo
-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 01 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/MWMBYZy) |
|02|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/PorBZwQ)|
|03|Sonia|[Codepen](https://codepen.io/YUJOU/pen/RwzBGxM?editors=1100)|
| 04 | 毛巾 |[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/WNqKrVN)|
| 05 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/BagPovJ) |
| 06 | Mars | [Codepen](https://codepen.io/MarsKuo/pen/KKjBovo) |
| 07 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/rNErvEM) |
| 08 | wind | [Codepen](https://codepen.io/wind7y/pen/OJewdbY) |
| 09 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/abgjzmZ) |
| 10 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/wvLEywN) |
| 11 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/WNqgMZN) |
| 11 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/zYVMzwP?editors=1100) |
| 12 | glen_69515 |[Codepen](https://codepen.io/glenyaochih/pen/MWMxYeJ)|
| 13 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/gONJYrO?editors=1100) |
| 14 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/OJKLyQX?editors=1100) |
| 15 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/LYwEXed) |
| 16 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/xbxNOEw?editors=1100) |

<!--
| No | Discord | [Codepen]() |
-->