Skip to content

Commit 75ac77a

Browse files
author
Andy Chau
committed
Component Accordion
1 parent 1687e39 commit 75ac77a

File tree

1 file changed

+217
-0
lines changed

1 file changed

+217
-0
lines changed

‎starter/06-Components/01-accordion.html

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Accordion Component</title>
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<style>
13+
/*
14+
SPACING SYSTEM (px)
15+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
16+
17+
FONT SIZE SYSTEM (px)
18+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
19+
*/
20+
21+
/*
22+
MAIN COLOR: #087f5b
23+
GREY COLOR: #343a40
24+
*/
25+
26+
* {
27+
margin: 0;
28+
padding: 0;
29+
box-sizing: border-box;
30+
}
31+
32+
/* ------------------------ */
33+
/* GENERAL STYLES */
34+
/* ------------------------ */
35+
body {
36+
font-family: "Inter", sans-serif;
37+
color: #343a40;
38+
line-height: 1;
39+
}
40+
41+
.accordion {
42+
width: 700px;
43+
margin: 100px auto;
44+
45+
display: flex;
46+
flex-direction: column;
47+
gap: 24px;
48+
}
49+
.item {
50+
box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
51+
padding: 24px;
52+
53+
/* should use grid with 3 column */
54+
display: grid;
55+
grid-template-columns: auto 1fr auto;
56+
column-gap: 24px;
57+
row-gap: 32px;
58+
align-items: center;
59+
}
60+
.number,
61+
.text {
62+
font-size: 24px;
63+
font-weight: 500;
64+
}
65+
66+
.number {
67+
color: #ced4da;
68+
}
69+
70+
.icon {
71+
width: 24px;
72+
height: 24px;
73+
stroke: #087f5b;
74+
}
75+
76+
.hidden-box {
77+
grid-column: 2;
78+
display: none;
79+
}
80+
81+
.hidden-box p {
82+
line-height: 1.6;
83+
margin-bottom: 24px;
84+
}
85+
86+
.hidden-box ul {
87+
color: #868e96;
88+
margin-left: 20px;
89+
90+
/* use flex and set direction to column it become horizontailly main axis*/
91+
display: flex;
92+
flex-direction: column;
93+
gap: 12px;
94+
}
95+
96+
/* OPEN STATE */
97+
.open {
98+
border-top: 4px solid #087f5b;
99+
}
100+
101+
.open .hidden-box {
102+
display: block;
103+
}
104+
105+
.open .number,
106+
.open .text {
107+
color: #087f5b;
108+
}
109+
</style>
110+
</head>
111+
<body>
112+
<div class="accordion">
113+
<div class="item">
114+
<p class="number">01</p>
115+
<p class="text">Where are these charis assembled?</p>
116+
<svg
117+
xmlns="http://www.w3.org/2000/svg"
118+
class="icon"
119+
fill="none"
120+
viewBox="0 0 24 24"
121+
stroke="currentColor"
122+
stroke-width="2"
123+
>
124+
<path
125+
stroke-linecap="round"
126+
stroke-linejoin="round"
127+
d="M19 9l-7 7-7-7"
128+
/>
129+
</svg>
130+
<div class="hidden-box">
131+
<p>
132+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi
133+
quas perferendis velit animi sapiente iste natus expedita nihil
134+
eaque nemo placeat labore, est fuga voluptatibus laboriosam minima
135+
iure maiores? Saepe.
136+
</p>
137+
<ul>
138+
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
139+
<li>Quis ipsam laudantium corrupti.</li>
140+
<li>
141+
Iusto assumenda veritatis corporis fuga libero expedita illum!
142+
</li>
143+
<li>Adipisci excepturi eius quia quidem quae veniam!</li>
144+
</ul>
145+
</div>
146+
</div>
147+
<div class="item open">
148+
<p class="number">02</p>
149+
<p class="text">How long do I have to return my chair?</p>
150+
<svg
151+
xmlns="http://www.w3.org/2000/svg"
152+
class="icon"
153+
fill="none"
154+
viewBox="0 0 24 24"
155+
stroke="currentColor"
156+
stroke-width="2"
157+
>
158+
<path
159+
stroke-linecap="round"
160+
stroke-linejoin="round"
161+
d="M19 9l-7 7-7-7"
162+
/>
163+
</svg>
164+
<div class="hidden-box">
165+
<p>
166+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi
167+
quas perferendis velit animi sapiente iste natus expedita nihil
168+
eaque nemo placeat labore, est fuga voluptatibus laboriosam minima
169+
iure maiores? Saepe.
170+
</p>
171+
<ul>
172+
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
173+
<li>Quis ipsam laudantium corrupti.</li>
174+
<li>
175+
Iusto assumenda veritatis corporis fuga libero expedita illum!
176+
</li>
177+
<li>Adipisci excepturi eius quia quidem quae veniam!</li>
178+
</ul>
179+
</div>
180+
</div>
181+
<div class="item">
182+
<p class="number">03</p>
183+
<p class="text">Do you ship to countries outside the EU?</p>
184+
<svg
185+
xmlns="http://www.w3.org/2000/svg"
186+
class="icon"
187+
fill="none"
188+
viewBox="0 0 24 24"
189+
stroke="currentColor"
190+
stroke-width="2"
191+
>
192+
<path
193+
stroke-linecap="round"
194+
stroke-linejoin="round"
195+
d="M19 9l-7 7-7-7"
196+
/>
197+
</svg>
198+
<div class="hidden-box">
199+
<p>
200+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi
201+
quas perferendis velit animi sapiente iste natus expedita nihil
202+
eaque nemo placeat labore, est fuga voluptatibus laboriosam minima
203+
iure maiores? Saepe.
204+
</p>
205+
<ul>
206+
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
207+
<li>Quis ipsam laudantium corrupti.</li>
208+
<li>
209+
Iusto assumenda veritatis corporis fuga libero expedita illum!
210+
</li>
211+
<li>Adipisci excepturi eius quia quidem quae veniam!</li>
212+
</ul>
213+
</div>
214+
</div>
215+
</div>
216+
</body>
217+
</html>

0 commit comments

Comments
 (0)