close

將所有內容包在details元素內，並以summary指示某些內容區是"可摺疊的"<thead>應該拿來放表格的標題

若需預設情況下是展開的，可加入open屬性<details open>

 

(目前 IE、Edge 無法支援)

 

 

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
    <details>
        <summary>標題</summary>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
    </details>
    <details>
        <summary>標題</summary>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
        <p>內容</p>
    </details>

    
</body>
</html>

 

 

輸出畫面：

1521527672033.jpg

1550209507441.jpg

 

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 ksyia 的頭像
    ksyia

    工作筆記(CSS+HTML)

    ksyia 發表在 痞客邦 留言(1) 人氣()

    E-mail轉寄