Skip to content

Commit 28cd459

Browse files
owen-webbowen-webb
committed
section-6: Accordion component.
1 parent 90ae9bf commit 28cd459

File tree

1 file changed

+203
-0
lines changed

1 file changed

+203
-0
lines changed

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

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
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+
8+
<title>Accordion Component</title>
9+
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
13+
14+
<style>
15+
/*
16+
SPACING SYSTEM (px)
17+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
18+
19+
FONT SIZE SYSTEM (px)
20+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
21+
*/
22+
23+
/*
24+
MAIN COLOR: #087f5b
25+
GRAY: #343a40
26+
*/
27+
28+
* {
29+
margin: 0;
30+
padding: 0;
31+
box-sizing: border-box;
32+
}
33+
34+
/* ------------------------ */
35+
/* GENERAL STYLES */
36+
/* ------------------------ */
37+
body {
38+
color: #343a40;
39+
font-family: 'Inter', sans-serif;
40+
line-height: 1;
41+
}
42+
43+
.accordion {
44+
display: flex;
45+
flex-direction: column;
46+
gap: 24px;
47+
margin: 100px auto;
48+
width: 700px;
49+
}
50+
51+
/* .hidden-box li {
52+
margin-bottom: 12px;
53+
} */
54+
55+
.hidden-box {
56+
display: none;
57+
grid-column: 2;
58+
}
59+
60+
.hidden-box p {
61+
line-height: 1.6;
62+
margin-bottom: 24px;
63+
}
64+
65+
.hidden-box ul {
66+
color: #868e96;
67+
display: flex;
68+
gap: 12px;
69+
flex-direction: column;
70+
margin-left: 16px;
71+
}
72+
73+
.icon {
74+
height: 24px;
75+
stroke: #087f5b;
76+
width: 24px;
77+
}
78+
79+
.item {
80+
align-items: center;
81+
box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
82+
column-gap: 24px;
83+
display: grid;
84+
grid-template-columns: auto 1fr auto;
85+
padding: 24px;
86+
row-gap: 32px;
87+
}
88+
89+
.number {
90+
color: #ced4da;
91+
}
92+
93+
.number, .text {
94+
/* color: #087f5b; */
95+
font-size: 24px;
96+
font-weight: bold;
97+
}
98+
99+
.open {
100+
border-top: 4px solid #087f5b;
101+
}
102+
103+
.open .hidden-box {
104+
display: block;
105+
}
106+
107+
.open .number, .open .text {
108+
color: #087f5b
109+
}
110+
</style>
111+
</head>
112+
113+
<body>
114+
<div class="accordion">
115+
<div class="item">
116+
<p class="number">01</p>
117+
<p class="text">
118+
Where are these chairs assembled?
119+
</p>
120+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon">
121+
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
122+
</svg>
123+
<div class="hidden-box">
124+
<p>
125+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi excepturi natus rem necessitatibus aspernatur maxime sequi officia omnis. Inventore dicta a dolores officia molestias, architecto illo doloremque culpa consequatur iure?
126+
</p>
127+
<ul>
128+
<li>
129+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
130+
</li>
131+
<li>
132+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
133+
</li>
134+
<li>
135+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
136+
</li>
137+
<li>
138+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
139+
</li>
140+
</ul>
141+
</div>
142+
</div>
143+
144+
<div class="item open">
145+
<p class="number">02</p>
146+
<p class="text">
147+
How long do I have to return my chair?
148+
</p>
149+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon">
150+
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
151+
</svg>
152+
<div class="hidden-box">
153+
<p>
154+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi excepturi natus rem necessitatibus aspernatur maxime sequi officia omnis. Inventore dicta a dolores officia molestias, architecto illo doloremque culpa consequatur iure?
155+
</p>
156+
<ul>
157+
<li>
158+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
159+
</li>
160+
<li>
161+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
162+
</li>
163+
<li>
164+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
165+
</li>
166+
<li>
167+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
168+
</li>
169+
</ul>
170+
</div>
171+
</div>
172+
173+
<div class="item">
174+
<p class="number">03</p>
175+
<p class="text">
176+
Do you ship to countries outside the EU?
177+
</p>
178+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon">
179+
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
180+
</svg>
181+
<div class="hidden-box">
182+
<p>
183+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi excepturi natus rem necessitatibus aspernatur maxime sequi officia omnis. Inventore dicta a dolores officia molestias, architecto illo doloremque culpa consequatur iure?
184+
</p>
185+
<ul>
186+
<li>
187+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
188+
</li>
189+
<li>
190+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
191+
</li>
192+
<li>
193+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
194+
</li>
195+
<li>
196+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
197+
</li>
198+
</ul>
199+
</div>
200+
</div>
201+
</div>
202+
</body>
203+
</html>

0 commit comments

Comments
 (0)