Click-to-reveal list demo

How to use it

1. 直接在頁面的 front matter 寫入資料：

layout: collapsible
title: Your page title
css:
  - "/css/collapsible-items.css"
collapsible_items:
  - title: 第一個標題
    content: |
      這裡寫第一段內容。
  - title: 第二個標題
    content: |
      這裡寫第二段內容。

1. 不需要額外引用 include；collapsible layout 會自動渲染 collapsible_items。

如果你想讓第一個項目預設展開，可以在 front matter 加上：

collapsible_open_first: true

如果這些資料會被很多頁共用，才比較建議放到 _data/*.yml。

1. If your data file is:

• _data/collapsible_examples.yml → use site.data.collapsible_examples
• _data/collapsible/examples.yml → use site.data.collapsible.examples

For your collapsible list include, in a markdown page you’d write:

include collapsible-list.html items=site.data.collapsible_examples.demo

or with folders:

include collapsible-list.html items=site.data.collapsible.examples.demo

If you want cleaner markdown, first assign it:

assign items = site.data.collapsible_examples.demo

include collapsible-list.html items=items

One important note with your current collapsible layout: it auto-reads only page.collapsible_items (front matter), not site.data.* directly. So to use _data without code changes, use the include call in page content as shown above.