最近因為在製作專案時,覺得有些地方需要使用摺疊卡片(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>
|