---
tags: 軟體工程師體驗營 - 2023
---

# 🏅 切版任務 Day25 - 常見問題區塊摺疊效果

### 題目
今天要來實作設計稿中的常見問題區塊：

> - 點選時 icon `＋／－` 切換
> - 點選時展開／收合 content 區塊
> - 點選時只會開啟該列 QA 區塊
> - 呈現 hover、active 效果
> - 運用 jQuery 或是 JavaScript 製作
>
> 呈現示意：
>
> 

可以利用此 [模板](https://codepen.io/hexschool/pen/vYVvMVp) 修改 CSS 和 JS（使用 jQuery）`...` 的部分練習，
也可以嘗試自己從頭開始練習製作。

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!--

參考解答：
（使用 jQuery）
https://codepen.io/hexschool/pen/LYgMWQy

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | 冬天#5215 | [Codepen](https://codepen.io/winter_/pen/WNaqega)|
| 2 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/QWZXLBZ) |
| 3 | Kulimusoda#2785 | [Codepen](https://codepen.io/yuch3n_chen/pen/PoyrYre?editors=0110) |
4|雲漢#5319|[codepen](https://codepen.io/keon981/pen/jOejOOR)
| 5 | 銀光菇#1692 | [Codepen](https://codepen.io/genesynthesis/pen/QWZXLPY) |
| 6 | Eden.C#9359 | [Codepen](https://codepen.io/iseden/pen/dygByGV) |
| 7 | Billy_Ti#9716 | [Codepen](https://codepen.io/Ti-Show/pen/MWPMWma?editors=1010) |
| 8 | Berlin#7338 | [Codepen](https://codepen.io/3qberlin/pen/PoyrYMa) |
| 9 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/mdzZdgo) |
| 10 | Eero#1147 | [Codepen](https://codepen.io/Eero-Chiao/pen/wvYLvbv) |
| 11 | townyuan#2653 | [Codepen](https://codepen.io/townyuan/pen/bGmPNGd) |
| 12 | henrykgb#5749 | [Codepen](https://codepen.io/henrymorgan666/pen/oNargXa)
| 13 | Snadra#1987 | [Codepen](https://codepen.io/mlqmhltg/pen/bGmPGZG)|
| 14 | Quantum#6093 | [Codepen](https://codepen.io/Min-Hao-Hung/pen/XWxLJgE) |
| 15 | Uli#1946 | [Codepen](https://codepen.io/uli1313/pen/OJBeJGK) |
| 16 | K（アギルダー）#0386 | [Codepen](https://codepen.io/klay376014/pen/vYVqEbO) |
| 17 | ChaosTu#9311 | [Codepen](https://codepen.io/torotu/pen/ExdBaJr) |
| 18 | judy123#2363 | [Codepen](https://codepen.io/hsuantsong/pen/ZEqdYgM) |
| 19 | jia yu#8896 | [Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/yLRdNvZ) |
| 20 | Hao#2485 | [Codepen](https://codepen.io/Seanfeb16/pen/mdzZJoq) |
| 21 | JimWang#6134 | [Codepen](https://codepen.io/Jim-Wang-the-selector/pen/eYPwpgJ) |
| 22 | Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/QWZXjZw?editors=0110) |
| 23 | Kaya#8857 | [Codepen](https://codepen.io/laron9486/pen/LYgKEaK) |
| 24 | N0c7iluc3n7#4390 | [Codepen](https://codepen.io/huang-yu-cheng/pen/dygBMYo) |
| 25 | gahwa#3562 | [Codepen](https://codepen.io/gahwa17/pen/ExdBKaM) |
| 26 | Jacky7035#9423 | [Codepen](https://codepen.io/adens123/pen/rNqEeNQ) |
| 27 | FiReBrO#0557 | [Codepen](https://codepen.io/firebro42/pen/RwezaNa) |
| 28 | Akira#9996 | [Codepen](https://codepen.io/Akira-Chen/pen/wvYLzwv) |
| 29 | snow#0255 | [Codepen](https://codepen.io/snow21723/pen/abRgOGz) |
| 30 | 吳偉雄恩#2256 | [Codepen](https://codepen.io/Bamboo1212/pen/JjmQRym) |
| 31 | 姜承#8204 | [Codepen](https://codepen.io/Troy0718/pen/YzJopPy) |
| 32 | 辣椒#1002 | [Codepen](https://codepen.io/chilichen118/pen/dygBMNG)|
| 33 | 浪裡小白龍#6860 | [Codepen](https://codepen.io/Emillo/pen/XWxLjGx) |
| 34 | Jennifer Chuang#3937 | [Codepen](https://codepen.io/yujhen/pen/GRYbWwp) |
| 35 | Rayo#8002 | [Codepen](https://codepen.io/loborayo/pen/QWZXvzZ) |
| 35 | David0799#4415 | [Codepen](https://codepen.io/David0799/pen/OJBevVE) |
| 36 | 翔.#0859 | [Codepen](https://codepen.io/energy95272z/pen/jOejxPq) |
| 37 | 鄭舜仁#6606 | [Codepen](https://codepen.io/randomno/pen/WNaqzVb) |
|38|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/NWOZMXr)
|39|yoyo#1003|[CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/oNardVR)|
|40|HsuanTang#1349|[CodePen](https://codepen.io/HsuanTang/pen/YzJmBZz)|
|41|Ataraxia#9977|[CodePen](https://codepen.io/ataraxia8888/pen/eYPqvWW)|
|42|SKey#9905|[CodePen](https://codepen.io/Dale-Chien/pen/vYQBgJm)|
|43|Yvonne#2721|[CodePen](https://codepen.io/Evonne/pen/vYVqXpo?editors=1111)|
|44|Janet#5784|[CodePen](https://codepen.io/janetlinnn/pen/eYQYZyV)|
|45|liam9930#4129|[CodePen](https://codepen.io/jgnjfvvt-the-lessful/pen/NWEWwQO)|
|46|肉個阿倫#7172|[CodePen](https://codepen.io/i9574385/pen/WNYvwMv)|
|47|兔子#6746|[CodePen](https://codepen.io/CarrotDetector/pen/XWybQjw)|
|48|weiting#3489|[CodePen](https://codepen.io/weiting14/pen/poQjEvV)|
| 49 | 薇拉#8110 |[Codepen](https://codepen.io/michellecc0522/pen/PoxzZPY)|
| 50 | betty#0693 |[Codepen](https://codepen.io/betty-hu/pen/VwVGPWq?editors=1010)|