Skip to content

Commit 9226d34

Browse files
andreituicuandreituicu
committed
Section 6 - Accordion
1 parent 94a52e6 commit 9226d34

File tree

1 file changed

+221
-0
lines changed

1 file changed

+221
-0
lines changed

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

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
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+
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
13+
rel="stylesheet"
14+
/>
15+
16+
<style>
17+
/*
18+
SPACING SYSTEM (px)
19+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
20+
21+
FONT SIZE SYSTEM (px)
22+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
23+
*/
24+
25+
/*
26+
MAIN COLOR: #087f5b
27+
GREY COLOR: #343a40
28+
29+
*/
30+
31+
* {
32+
margin: 0;
33+
padding: 0;
34+
box-sizing: border-box;
35+
}
36+
37+
body {
38+
font-family: "Inter", sans-serif;
39+
color: #343a40;
40+
line-height: 1;
41+
}
42+
43+
.accordion {
44+
width: 700px;
45+
margin: 100px auto;
46+
display: flex;
47+
flex-direction: column;
48+
gap: 24px;
49+
}
50+
51+
.item {
52+
box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
53+
padding: 24px;
54+
display: grid;
55+
grid-template-columns: auto 1fr auto;
56+
column-gap: 24px;
57+
row-gap: 32px;
58+
align-items: center;
59+
}
60+
61+
.numnber,
62+
.text {
63+
font-size: 24px;
64+
font-weight: 500;
65+
}
66+
67+
.numnber {
68+
color: #ced4da;
69+
}
70+
71+
.icon {
72+
height: 24px;
73+
width: 24px;
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+
display: flex;
90+
flex-direction: column;
91+
gap: 12px;
92+
}
93+
94+
.open {
95+
border-top: 8px solid #087f5b;
96+
}
97+
98+
.open .hidden-box {
99+
display: block;
100+
}
101+
102+
.open .text,
103+
.open .numnber {
104+
color: #087f5b;
105+
}
106+
107+
.open .icon {
108+
stroke: #087f5b;
109+
}
110+
</style>
111+
<script>
112+
function accordionToggle(item) {
113+
if (item.classList.contains("open")) {
114+
item.classList.remove("open");
115+
} else {
116+
item.classList.add("open");
117+
}
118+
}
119+
</script>
120+
</head>
121+
<body>
122+
<div class="accordion">
123+
<div class="item" onclick="accordionToggle(this)">
124+
<p class="numnber">01</p>
125+
<p class="text">How long do I have to return my chair?</p>
126+
<svg
127+
xmlns="http://www.w3.org/2000/svg"
128+
fill="none"
129+
viewBox="0 0 24 24"
130+
stroke-width="2"
131+
stroke="currentColor"
132+
class="icon"
133+
>
134+
<path
135+
stroke-linecap="round"
136+
stroke-linejoin="round"
137+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
138+
/>
139+
</svg>
140+
<div class="hidden-box">
141+
<p>
142+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
143+
Voluptatibus ducimus suscipit sed hic. Perferendis deleniti
144+
aspernatur quasi in ipsa sed nisi, ea id? Maxime veniam animi nisi
145+
eum, exercitationem culpa.
146+
</p>
147+
<ul>
148+
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
149+
<li>quisquam itaque, voluptate eaque at?</li>
150+
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
151+
<li>cupiditate fugit deserunt quod doloremque tempore, ipsa est</li>
152+
</ul>
153+
</div>
154+
</div>
155+
<div class="item" onclick="accordionToggle(this)">
156+
<p class="numnber">02</p>
157+
<p class="text">Where are these chairs assembled?</p>
158+
<svg
159+
xmlns="http://www.w3.org/2000/svg"
160+
fill="none"
161+
viewBox="0 0 24 24"
162+
stroke-width="2"
163+
stroke="currentColor"
164+
class="icon"
165+
>
166+
<path
167+
stroke-linecap="round"
168+
stroke-linejoin="round"
169+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
170+
/>
171+
</svg>
172+
<div class="hidden-box">
173+
<p>
174+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
175+
Voluptatibus ducimus suscipit sed hic. Perferendis deleniti
176+
aspernatur quasi in ipsa sed nisi, ea id? Maxime veniam animi nisi
177+
eum, exercitationem culpa.
178+
</p>
179+
<ul>
180+
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
181+
<li>quisquam itaque, voluptate eaque at?</li>
182+
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
183+
<li>cupiditate fugit deserunt quod doloremque tempore, ipsa est</li>
184+
</ul>
185+
</div>
186+
</div>
187+
<div class="item" onclick="accordionToggle(this)">
188+
<p class="numnber">03</p>
189+
<p class="text">Do you ship to countries outside of EU?</p>
190+
<svg
191+
xmlns="http://www.w3.org/2000/svg"
192+
fill="none"
193+
viewBox="0 0 24 24"
194+
stroke-width="2"
195+
stroke="currentColor"
196+
class="icon"
197+
>
198+
<path
199+
stroke-linecap="round"
200+
stroke-linejoin="round"
201+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
202+
/>
203+
</svg>
204+
<div class="hidden-box">
205+
<p>
206+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
207+
Voluptatibus ducimus suscipit sed hic. Perferendis deleniti
208+
aspernatur quasi in ipsa sed nisi, ea id? Maxime veniam animi nisi
209+
eum, exercitationem culpa.
210+
</p>
211+
<ul>
212+
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
213+
<li>quisquam itaque, voluptate eaque at?</li>
214+
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
215+
<li>cupiditate fugit deserunt quod doloremque tempore, ipsa est</li>
216+
</ul>
217+
</div>
218+
</div>
219+
</div>
220+
</body>
221+
</html>

0 commit comments

Comments
 (0)