Collapsibles 翻譯為折疊的意思，所以它可以像是下拉選單一樣，點擊按鈕後即可展開內容，其實這個組件的作法類似 Tab 組件，那麼，我們現在就直接開始實作吧！
在最外層我們要使用一個 Class 名稱 container 的 div，先將所有的 Collapsibles 給包起來，Collapsibles 的組成元件有：一個 Button、一段文字所組成。
HTML：
<div class="container">
<button class="collapse">Section 1</button>
<div class="collapse__items">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, cupiditate necessitatibus?
Soluta eaque nam laboriosam deleniti voluptatum velit qui impedit dignissimos eveniet ab harum
blanditiis sunt, laborum reiciendis tempora debitis molestias est quasi omnis? Quis vitae doloremque
molestias sequi sunt quidem cupiditate ducimus fugiat beatae nisi illo, eaque ad, vel velit corporis
voluptas nemo laborum doloribus excepturi asperiores dicta? Culpa aperiam voluptas mollitia iure
nisi eveniet ea obcaecati officia fugit eius sunt numquam, distinctio laborum repellendus
perferendis! Omnis possimus quidem impedit sit recusandae, eius dolorem ullam. Cumque, quod corporis
deserunt quisquam architecto dolore earum unde. Quisquam obcaecati ipsum eaque enim.
</p>
</div>
...
</div>
顯示結果：
因為篇幅的關係，先不將所有程式碼列出。將三個 collapse 加入後如下圖。
沒有特別的去修改，使用程式碼如下。
* {
margin: 0;
padding: 0;
list-style: none;
}使用程式碼如下。
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
顯示結果：
這裡先對 container 做修改，為了讓畫面看起來不要醜，調整它的寬度為 80%。
CSS：
.container {
width: 80%;
}
顯示結果：
緊接著，針對 collapse 樣式的修改。
CSS：
.collapse {
width: 100%;
height: 2rem;
padding-left: 15px;
text-align: start;
border: none;
}
.collapse__items {
padding: 15px;
border: 3px solid #eee;
border-top: none;
text-align: justify;
display: none;
}
collapse放的是 Button 的樣式調整，而collapse__items調整的是文字。
顯示結果：
這裡先採用 dispaly 隱藏和顯示的寫法。
let btn = document.getElementsByClassName("collapse");
i;
for (i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function () {
let item = this.nextElementSibling;
if (item.style.display === "none") {
item.style.display = "block";
item.style.opacity = 1;
} else {
item.style.display = "none";
}
});
}
顯示結果：
功能是寫出來了，但是這裡有一個很嚴重的問題，當我們按下 Button 時，雖然可以顯示文字，但是顯示的方式太生硬了，本來想使用 transition 的方法，製作過度效果，但是後來發現display:none變成 display:block時，不能直接使用transition【1】，所以，在下一個章節，我們要重新時作 Demo2，之後可以比較兩者的差異。
這裡打算參考 W3Schools【2】的寫法，然後我們要改寫它。
在 HTML 的部分，我們可以沿用之前的架構不需要做修改。而在起手式加入的 body 標籤加入背景色，以及 container 同樣加入被景色。
CSS：
body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #4c6cb9;
}
.container {
width: 80%;
background: whitesmoke;
}
顯示結果：
接著，這邊直接從 Collapsibles 的樣式開始著手。
CSS：
.collapse {
width: 100%;
padding-left: 15px;
text-align: start;
border: none;
background-color: #27547f;
color: white;
padding: 18px;
font-size: 1rem;
}
.collapse:hover,
.active {
background-color: #63bbd8;
cursor: pointer;
}
顯示結果：
文字沒有間距，畫面難看，這裡在段落 p 標籤中加入 padding。
CSS：
p {
padding: 16px;
}
顯示結果：
加入 icon：
這裡學習一個加入符號的用法，\002B指的是符號「+」，而'\2212’指的是符號「-」。
CSS：
.collapse:after {
content: "\002B";
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
顯示結果：
可以在 JavaScript 實作完後，再觀察
加號是否有變成減號。
終於到了最後一關，也是最重要的一部分，這邊先貼上程式碼，然後我們再一步一步的各個擊破。
JavaScript：
var btn = document.getElementsByClassName("collapse");
var i;
for (i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
首先，因為這裡有三個 Button，所以要使用一個 for loop，用來監聽全部的 Button，this.classList.toggle("active");用來處理加與減符號的變化，
scrollHeight用法可參考【3】。
加了JavaScript 發現居然 Not Working，後來檢查程式碼，原來是內容的部分沒有修改到，在 CSS 加入下面的程式碼後，功能就會正常了。
CSS：
.collapse__items {
padding: 0 18px;
border-top: none;
text-align: justify;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
顯示結果：
Collapsibles 的用法其實挺特別的，尤其是 JavaScript 部分，原理並不是很困難，但是用了很多很少看過的方法，需要好好想想要怎麼運用，儘管不是很好寫，但看在學了新東西的份上，這個時間花得也值得了，以上為今天的內容，感謝收看！
iThome鐵人賽
看影片追技術