可折疊的內(nèi)容塊

可折疊（Collapsibles）允許您隱藏或顯示內(nèi)容 - 對于存儲部分信息很有用。

如需創(chuàng)建可折疊的內(nèi)容塊，請向某個容器分配 data-role="collapsible" 屬性。在容器（div）中，添加一個標(biāo)題元素（h1-h6），其后是您需要擴(kuò)展的任意 HTML 標(biāo)記：

實例

<div data-role="collapsible">
  <h1>點擊我 - 我可以折疊！</h1>
  <p>我是可折疊的內(nèi)容。</p>
</div>

親自試一試

默認(rèn)地，該內(nèi)容是關(guān)閉的。如需在頁面加載時擴(kuò)展內(nèi)容，請使用 data-collapsed="false"：

實例

<div data-role="collapsible" data-collapsed="false">
  <h1>點擊我 - 我可以折疊！</h1>
  <p>現(xiàn)在我默認(rèn)是展開的。</p>
</div>

親自試一試

嵌套的可折疊塊

可以嵌套可折疊內(nèi)容塊：

實例

<div data-role="collapsible">
  <h1>點擊我 - 我可以折疊！</h1>
  <p>我是被展開的內(nèi)容。</p>
  <div data-role="collapsible">
    <h1>點擊我 - 我是嵌套的可折疊塊！</h1>
    <p>我是嵌套的可折疊塊中被展開的內(nèi)容。</p>
  </div>
</div>

親自試一試

提示：可折疊內(nèi)容塊可以被嵌套您希望的任意次數(shù)。

可折疊集合

可折疊集合（Collapsible sets）指的是被組合在一起的可折疊塊（常被稱為手風(fēng)琴）。當(dāng)新塊被打開時，所有其他塊會關(guān)閉。

創(chuàng)建若干內(nèi)容塊，然后通過 data-role="collapsible-set" 用新容器包裝這個可折疊塊：

實例

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>點擊我 - 我可以折疊！</h1>
    <p>我是被展開的內(nèi)容。</p>
  </div>
  <div data-role="collapsible">
    <h1>點擊我 - 我可以折疊！</h1>
    <p>我是被展開的內(nèi)容。</p>
  </div>
</div>

親自試一試