使用CSS 動態調整Bootstrap 的折疊按鈕圖示 | collapsible css
PhotobyPankajPatelonUnsplash[1][2]Bootstrap提供一個內容折疊(Collapse)的功能,讓資訊可以被收合,使用方式只要透過加入class名稱和data-*屬性,詳細可以參考BootstrapCollapse的Example[3]範例。最近在開發的時候遇到一個需求,需要在內容折疊的地方加上收/合的icon,當下馬上就是想到JavaScript來實做這個功能,只要監聽按鈕的clickevent再去換掉icon,後來就在想CSS是不是可以做到這件事,就可以不需要透過JavaScript來控制了(CSS苦手😭),後來查了一下,的確可以透過CSS做到這件事,而且非常容易。加入CSS在HTML部分,使用c...
Photo by Pankaj Patel on Unsplash[1][2]Bootstrap 提供一個內容折疊(Collapse)的功能,讓資訊可以被收合,使用方式只要透過加入 class 名稱和 data-* 屬性,詳細可以參考 Bootstrap Collapse 的 Example[3] 範例。
最近在開發的時候遇到一個需求,需要在內容折疊的地方加上收/合的 icon,當下馬上就是想到 JavaScript 來實做這個功能,只要監聽按鈕的 click event 再去換掉 icon,後來就在想 CSS 是不是可以做到這件事,就可以不需要透過 JavaScript 來控制了(CSS 苦手 😭),後來查了一下,的確可以透過 CSS 做到這件事,而且非常容易。
加入 CSS在 HTML 部分,使用 collapse 通常需要以下的 attribute,接著再加入兩個 icon 樣式,down 和 up(這裡使用 fontawsome[4] 作為範例):
<button
class="collapse-btn"
type="button"
data-toggle="collapse"
data-target="#menu"
aria-expanded="false"
aria-controls="menu"
>
Collapse Button
<i class="fa fa-angle-down fa-lg menu__icon--...