如何使用 CSS 製做一個摺疊卡片？(可用 transition 有過渡的展開)

最近因為在製作專案時，覺得有些地方需要使用摺疊卡片(Collapse)來隱藏內容，需要時再讓使用者自行點擊展開，所以就研究了一下，如何只用 CSS 簡單製做一個摺疊卡片。

以下先給大家看看製作出來的效果(沒有特別做設計所以有點醜，請見諒):

Demo 網頁

範例程式碼

此段 CSS 使用 + 來影響與 <input> 標籤同級的下一個元素，也就是 <div class="container">，再透過 grid 來做到無限制內文長度，且可以使用 transition 屬性過渡的摺疊。無論內文長度有多長，都可以完整、有過渡的展開。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        div.container > div{
            overflow: hidden;
        }

        input.historyCollapse + div.container{
            display: grid;
            grid-template-rows: 0fr;
            transition: .2s;
            background-color: rgb(235, 235, 235);
            padding: 0 1rem;
        }

        input.historyCollapse:checked + div.container{
            grid-template-rows: 1fr;
        }

        .historyCollapseButton{
            display: block;
            padding: .5rem 1rem;
            cursor: pointer;
            background-color: rgb(225, 225, 225);
            line-height: 3rem;
        }

        .historyCollapseButton2{
            padding: .5rem 1rem;
            border-radius: 8px;
            cursor: pointer;
            color: white;
            background-color: rgb(64, 112, 223);
            line-height: 3rem;
            transition: .2s;
        }

        .historyCollapseButton2:hover{
            background-color: rgb(38, 83, 244);
        }

    </style>
</head>
<body>
    <label for="historyCollapse" class="historyCollapseButton">點此展開</label>
    <input id="historyCollapse" class="historyCollapse" type="checkbox" hidden>
    <div class="container">
        <div>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
        </div>
    </div>

    <label for="historyCollapse2" class="historyCollapseButton">點此展開</label>
    <input id="historyCollapse2" class="historyCollapse" type="checkbox" hidden>
    <div class="container">
        <div>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
        </div>
    </div>

    <label for="historyCollapse3" class="historyCollapseButton">點此展開</label>
    <input id="historyCollapse3" class="historyCollapse" type="checkbox" hidden>
    <div class="container">
        <div>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
        </div>
    </div>

    <div>順便做個點按鈕型:</div>
    <label for="historyCollapse4" class="historyCollapseButton2">點此展開</label>
    <input id="historyCollapse4" class="historyCollapse" type="checkbox" hidden>
    <div class="container">
        <div>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
        </div>
    </div>

</body>
</html>

注意事項

請注意此段程式碼因為使用了 + 這個選擇器，所以 <div class="container"> 一定要放在 <input> 之後，例如:

68
69
70
71
72
73


...
<label for="historyCollapse" class="historyCollapseButton">點此展開</label>
<input id="historyCollapse" class="historyCollapse" type="checkbox" hidden>
<div class="container">
    <div>
...

因為 + 這個選擇器 只會影響同層級下一個元素，所以如果 <input> 下一個不接 <div class="container"> 則此 CSS 將會失效。

例如以下的寫法為 會失效的寫法:

68
69
70
71
72
73


...
<input id="historyCollapse" class="historyCollapse" type="checkbox" hidden>
<label for="historyCollapse" class="historyCollapseButton">點此展開</label>
<div class="container">
    <div>
...

再來要記得，每一個摺疊卡片，都要有獨立的 id，要記得設定 <input> 標籤的 id 與 <label> 標籤的 for 屬性。

68
69
70
71
72


...
<input id="historyCollapse" class="historyCollapse" type="checkbox" hidden>
<label for="historyCollapse" class="historyCollapseButton">點此展開</label>
<div class="container">
...

此外，若要在每個卡片最右側加上用於顯示展開的符號，建議使用 JavaScript 輔助會較方便製作。

變體: 手風琴摺疊

若要製作手風琴形式的摺疊卡片(一串卡片始終只有開一個)，僅需將 <input> 標籤的 type 改為 radio，並加上 name 屬性，取相同的名稱便可以達成。

例如:

1

<input id="historyCollapse3" class="historyCollapse" type="radio" name="collapse1" hidden>

Demo 網頁

手風琴摺疊範例程式碼

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        div.container > div{
            overflow: hidden;
        }

        input.historyCollapse + div.container{
            display: grid;
            grid-template-rows: 0fr;
            transition: .2s;
            background-color: rgb(235, 235, 235);
            padding: 0 1rem;
        }

        input.historyCollapse:checked + div.container{
            grid-template-rows: 1fr;
        }

        .historyCollapseButton{
            display: block;
            padding: .5rem 1rem;
            cursor: pointer;
            background-color: rgb(225, 225, 225);
            line-height: 3rem;
        }

    </style>
</head>
<body>
    <label for="historyCollapse" class="historyCollapseButton">點此展開</label>
    <input id="historyCollapse" class="historyCollapse" type="radio" name="collapse1" hidden>
    <div class="container">
        <div>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
        </div>
    </div>

    <label for="historyCollapse2" class="historyCollapseButton">點此展開</label>
    <input id="historyCollapse2" class="historyCollapse" type="radio" name="collapse1" hidden>
    <div class="container">
        <div>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
        </div>
    </div>

    <label for="historyCollapse3" class="historyCollapseButton">點此展開</label>
    <input id="historyCollapse3" class="historyCollapse" type="radio" name="collapse1" hidden>
    <div class="container">
        <div>
            <p>這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。這裡是測試訊息，不管填多少都可以展開。</p>
            <p></p>
        </div>
    </div>

</body>
</html>