-
Notifications
You must be signed in to change notification settings - Fork 0
/
css-collapse-example.html
68 lines (56 loc) · 1.81 KB
/
css-collapse-example.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Collapse Example</title>
<style>
/* hide collapsible div */
input+label+div.collapse {
max-height: 0;
overflow: hidden;
transition: max-height 1s;
}
input:checked+label+div.collapse {
max-height: 90px;
}
/* hide checkbox */
input#collapse-checkbox {
display: none;
}
/* triangle before checkbox */
input+label#collapse-btn::before {
content: " ";
display: inline-block;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 15px solid currentColor;
margin-right: 5px;
transition: transform 1s;
}
/* triangle turn on click */
input:checked+label#collapse-btn::before {
transform: rotate(90deg);
}
</style>
</head>
<body>
<h1>HTML & CSS Collapse</h1>
<p>A section that can be collapsed in pure HTML and CSS.</p>
<input type="checkbox" id="collapse-checkbox">
<label for="collapse-checkbox" id="collapse-btn">Collapsible Section</label>
<div class="collapse">
<ul>
<li>collapsible content 1</li>
<li>collapsible content 2</li>
<li>collapsible content 3</li>
</ul>
</div>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</body>
</html>