使用 CSS 動態調整 Bootstrap 的折疊按鈕圖示

Photo by Pankaj Patel on Unsplash
Photo by Pankaj Patel on Unsplash

Bootstrap 提供一個內容折疊（Collapse）的功能，讓資訊可以被收合，使用方式只要透過加入 class 名稱和 data-* 屬性，詳細可以參考 Bootstrap Collapse 的 Example 範例。

最近在開發的時候遇到一個需求，需要在內容折疊的地方加上收/合的 icon，當下馬上就是想到 JavaScript 來實做這個功能，只要監聽按鈕的 click event 再去換掉 icon，後來就在想 CSS 是不是可以做到這件事，就可以不需要透過 JavaScript 來控制了（CSS 苦手 😭），後來查了一下，的確可以透過 CSS 做到這件事，而且非常容易。

加入 CSS

在 HTML 部分，使用 collapse 通常需要以下的 attribute，接著再加入兩個 icon 樣式，down 和 up（這裡使用 fontawsome 作為範例）：

<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--open"></i>
  <i class="fa fa-angle-up fa-lg menu__icon--close"></i>
</button>


<div class="collapse" id="menu">
  ...
</div>

上面的 HTML 結構，可以簡單看成如下：

<element class="collapse-btn" aria-expanded="false">
  …
    <element class="menu__icon--open">
    <element class="menu__icon--close">

根據這個結構來定義 CSS，關鍵在 aria-expanded="false" 這個屬性，可以透過這個屬性的值來動態調整 icon，使用 CSS Attribute 並且加入對應的 class：

[aria-expanded="false"] .menu__icon--open {
  display: inline;
}


[aria-expanded="false"] .menu__icon--close {
  display: none;
}


[aria-expanded="true"] .menu__icon--open {
  display: none;
}


[aria-expanded="true"] .menu__icon--close {
  display: inline;
}

display: inline 也可以替換成 display: block，請根據你的需求自行調整。

實際效果

Reference