-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaccordian.html
112 lines (97 loc) · 3.73 KB
/
accordian.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
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(royalblue, rgb(0, 71, 202));
height: 100vh;
}
.accordUl {
margin: 100px auto;
width: fit-content;
}
.accordUl li {
list-style-type: none;
width: 100%;
background: white;
margin-bottom: 10px;
padding: 10px;
}
.accordUl li label {
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20px;
text-transform: capitalize;
cursor: pointer;
}
.accordUl label + input[type="radio"] {
display: none;
}
.accordUl li label span {
rotate: 90deg;
font-size: 25px;
}
.accordUl .content{
padding: 0 10px;
line-height: 26px;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s;
}
.accordUl label + input[type="radio"]:checked + .content{
max-height: 400px;
}
</style>
</head>
<body>
<ul class="accordUl">
<li>
<label for="first">what is Html?
<span>></span>
</label>
<input type="radio" id="first" name="accordion" checked />
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae libero adipisci molestias ratione
sint accusantium?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae libero adipisci
molestias ratione sint accusantium?</p>
</div>
</li>
<li>
<label for="second">what is Css?
<span>></span>
</label>
<input type="radio" id="second" name="accordion" />
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae libero adipisci molestias ratione
sint accusantium?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae libero adipisci
molestias ratione sint accusantium?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae libero adipisci molestias ratione
sint accusantium?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae libero adipisci
molestias ratione sint accusantium?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae libero adipisci molestias ratione
sint accusantium?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae libero adipisci
molestias ratione sint accusantium?</p>
</div>
</li>
<li>
<label for="third">what is Javascript?
<span>></span>
</label>
<input type="radio" id="third" name="accordion" />
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae libero adipisci molestias ratione
sint accusantium?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae libero adipisci
molestias ratione sint accusantium?</p>
</div>
</li>
</ul>
</body>
</html>