# 🏅 Day 50 - Bootstrap Collapse

### 題目知識點介紹

了解 [collapse 文件](https://getbootstrap.com/docs/5.3/components/collapse/#how-it-works) 連結之方式，主要是透過點擊的 href 與目標 id 做配對，就可以開啟 collapse 欲打開之區塊。

此次作業實作以下畫面：


> 額外補充：原 a 連結或 botton 的部分修改為 input 的 radio 種類，就可以產生唯一選項，另外需要透過 JS 或 jQuery 啟動開啟其一項目時其他項目會關閉，目前在 JS 區塊有進行相關程式碼可參考。

### 題目

透過此 [模板](https://codepen.io/jmimiding4104/pen/ExBpPvy?editors=1010) 完成付款畫面，需修改 *** 的部分，完成所有 collapse 的 href 與 id 之配對。

## 回報流程

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


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

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 01 | 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/JjQaPmB) |
|02|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/QWXVWwp?editors=1010)|
|03|tim|[Codepen](https://codepen.io/jskrtivy-the-animator/pen/rNEyQKB)|
|04|泊岸|[Codepen](https://codepen.io/qoq77416416/pen/LYKJELb?editors=1010)|
|05|Sonia|[Codepen](https://codepen.io/YUJOU/pen/WNqgwJQ?editors=1010)|
|06|KUN.|[Codepen](https://codepen.io/barry91205/pen/OJeoNqP?editors=1010)|
|07|Ariel|[Codepen](https://codepen.io/ariel0510/pen/NWZLyaK?editors=1010)|
|08|Kaya|[Codepen](https://codepen.io/kayaribi/pen/KKjxEbQ)|
|09|meowmeow1967|[Codepen](https://codepen.io/snow1224/pen/VwJEeZL)|
|10|Mars|[Codepen](https://codepen.io/MarsKuo/pen/wvLQMEp)|
|11|yaoling.liang|[Codepen](https://codepen.io/Yao-Ling-L-/pen/VwJVWVN?editors=1000)|
|12|Glen_69515|[Codepen](https://codepen.io/glenyaochih/pen/gONyrap)|
|13|PoWei|[Codepen](https://codepen.io/Po-Wei-Lai/pen/jOjRzrv?editors=1010)|
| 14 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/wvLbaQJ?editors=1010) |
| 15 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/QWeLNWP) |
| 16 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/mdNJWgP) |

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