Pure CSS collapse for Website with CSS :target selector

Posted on   |   In   |     |  

分享如何使用 CSS Selector 製作 Pure CSS 的 Collapse 效果。

banner

在網頁開發時難免會需要製作收闔(Collapse)的可摺疊效果，如 w3schools.com 呈現的 Bootstrap Collapse 的範例，使用上非常簡單。

而如果我們今天想自己刻一個類似的 Collapse 其實也沒太複雜，只是會HTML醜一點。這邊就是示範如何使用CSS Selector的 :target 來實作 Collapse 效果。

CSS Selector

這邊我們會使用 CSS Selector 來幫我們實作，而由於 CSS Selector 在目前個瀏覽器的主流版本大都支援，所以很少會有相容性的問題。完整的相容性參考Browser support varies

實作請參考下方:

使用上的語意與結構不難，就是將我們原本的 的 href 屬性指定到特定錨點ID(如:範例的#hide, #show) 就是我們對應的 id 為 hide 與 show 的屬性為我們的更改目標，並套購 :target 內的 CSS 屬性值。

而第一個 css 的條件 => .details,.show,.hide:target 翻成白話為以下條件:

  • 不顯示 class 名稱為 details 的元素
  • 不顯示 class 名稱為 show 的元素
  • 不顯示 class 名稱為 hide 內的 指定的target目標 元素

而第二個 css 的條件 => #hide:target + #show,#hide:target ~ .detail 翻成白話為以下條件:

  • 顯示 id 名稱為 hide 內的 指定的target目標下 緊接著 id 名稱為 show 的元素
  • 顯示 id 名稱為 hide 內的 指定的target目標下 且包含 class 名稱為 detail 的元素

Other Alternatives

除了上面的 CSS Selector 的做法，如果不考慮部分瀏覽器的相容性(IE, Edge與Opera Mini)，單用HTML5的 summary 與 detail 標籤就可以達成我們的需求:

光就解決辦法來看，這個寫法比較漂亮也不會撰寫重複的HTML內容。而這個解決的詳細相容性參考Browser support varies

至於選擇哪一個解法就要見仁見智瞜~!

References