# 🏅 Day 34 - Modal 與 collapse 元件實用

### 題目
請觀看並理解 [Modal 元件](https://getbootstrap.com/docs/5.3/components/modal/) 的運作原理，只能更改下方 Launch demo modal 的 Button 內容讓這個 Modal 可以順利被開啟（不能更動 Modal 內容），此外另外使用 [Collapse](https://getbootstrap.com/docs/5.3/components/collapse/) 放置於 modal ，創造出摺疊的效果，如下圖：

><img src="https://imgur.com/3TWL8y8.png" alt="..." style="width: 400px;">

><img src="https://imgur.com/Ii9sz3Z.png" alt="..." style="width: 400px;">

>這邊會複習到前面的部分，需修改按鈕的樣式與顏色。

**請修改下方`***` 處(共7處)**

HTML

<!-- Button trigger modal -->

<!-- data-bs-toggle 是選擇在 Bootstrap 要觸發的行為-->
<!-- data-bs-target 是需要指向的內容-->
<button type="button" class="btn btn-primary mt-1 ms-3" data-bs-toggle=" *** " data-bs-target=" *** ">
  Launch demo modal
</button>

<!-- Modal -->

<!-- 這邊的 id 是上方指向的接受名稱 -->
<div class="modal fade" id=" *** " tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
        </button>
      </div>
      <div class="modal-body">
          
<!-- 第一個 *** 是需要加入某個 class 名稱，讓一開始能顯示"點我打開" -->
        <button class="btn btn-outline-success *** " type="button" data-bs-toggle=" *** " data-bs-target=" *** " aria-expanded="false" aria-controls="collapseExample">
          <span class="open">點我打開</span>
          <span class="close">點我關閉</span>
        </button>
        <div class="collapse" id=" *** ">
          <div class="card card-body mt-3">
            我被打開
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

**請修改 CSS 內 `***` 的內容，達到點擊後 span 能顯示或隱藏(共4處)**

>請觀察 collapse 在內容關閉與開啟時， class 的改變。

CSS：

.collapsed .open {
  display: ***;
}
.open {
  display: ***;
}
.collapsed .close {
  display: ***;
}
.close {
  display: ***;
}

## 回報流程

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


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

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 01 | 毛巾 |[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/MWMvyXp)|
| 02 | tim |[Codepen](https://codepen.io/jskrtivy-the-animator/pen/rNEyQKB)|
|03|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/abgyNgK)|
|04|Mars|[Codepen](https://codepen.io/MarsKuo/pen/dyBzXpE)|
| 05 | hsiu8767 | [codepen](https://codepen.io/hsiu8767/pen/oNrexKJ) |
| 06 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/gONxMZg?editors=1100) |
| 07 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/oNreLOX?editors=1100) |
| 08 | lunlun0514 | [Codepen](https://codepen.io/f5badapple/pen/oNrezzL?editors=1000) |
| 09 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/ZEdJbvj) |
| 10 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/rNEzLjK) |
| 11 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/ZEdJKXB?editors=1100) |
| 12 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/abgyyvo) |
| 13 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/JjQyyRd) |
| 14 | KUN. | [Codepen](https://codepen.io/barry91205/pen/xxoLLPZ) |
| 15 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/Bagdwzb?editors=1100) |
| 16 | haojing | [Codepen](https://codepen.io/hjxu/pen/dyBzYrY) |
| 17 | 邵 |[Codepne](https://codepen.io/ukscrlno-the-typescripter/pen/oNreGYE)|
| 18 | Kerwin | [Codepen](https://codepen.io/kerwin/pen/YzoxrJd) |
| 19 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/XWLaZPa?editors=1100) |
| 20 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/vYqJQZB) |
| 21 | kawa | [Codepen](https://codepen.io/z83xji6/pen/JjQywVb) |
| 22 | wind | [Codepen](https://codepen.io/wind7y/pen/QWXMYrb) |
| 23 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/oNrGGvZ) |
| 24 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/MWMEEra?editors=1100) |
| 25 | Mike | [Codepen](https://codepen.io/mike2049/pen/zYVERwK) |
| 26 | emmayo | [Codepen](https://codepen.io/emmayo/pen/jOjGzBV) |
| 27 | Edhunag | [Codepen](https://codepen.io/yide1986/pen/YzorvGE) |
| 28 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/YzorJWr) |
| 29 | 俊 | [Codepen](https://codepen.io/jun12079/pen/MWMEPEw) |
| 30 | ss585801 | [Codepen](https://codepen.io/ss585801/pen/abgLXjW?editors=1100) |
| 31 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/RwzjaEB?editors=1100)|
| 32 | 嚼勁先生 |[Codepen](https://codepen.io/James520284/pen/LYKeaVL)|
| 33 | xcx100 | [Codepen](https://codepen.io/c13026/pen/wvLyJoK) |
| 34 | Glen_69515 | [Codepen](https://codepen.io/glenyaochih/pen/QWXQMKK)|
| 35 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/OJeQQbg)|
| 36 | jasonlin | [Codepen](https://codepen.io/gfswkraq-the-reactor/pen/OJevjdy)|
| 37 | Enn | [Codepen](https://codepen.io/enntang/pen/xxojWEb)|
| 38 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/NWZzbRN)|
| 39 | 野鴿 | [Codepen](https://codepen.io/HoshinoSyouta/pen/OJeEZNo)|
| 40 | macihuang | [Codepen](https://codepen.io/macy1215/pen/WNqPemL)|
| 41 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/QWXYzQd)|
| 42 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/vYqPZMa) |
| 43 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/ZEddJvG?editors=1100) |
| 44 | Jack | [Codepen](https://codepen.io/kxbhixte-the-sasster/pen/QWeWRPe?editors=1100) |
| 45 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/azbQvOG?editors=1100) |

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