Skip to content

Commit 4932d23

Browse files
solygambassolygambas
committed
add FAQ accordion
1 parent 1d56618 commit 4932d23

File tree

3 files changed

+184
-0
lines changed

3 files changed

+184
-0
lines changed

‎12-FAQ collapse/index.html

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
9+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
10+
crossorigin="anonymous"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>FAQ Collapse</title>
14+
</head>
15+
<body>
16+
<h1>Frequently Asked Questions</h1>
17+
<div class="faq-container">
18+
<div class="faq active">
19+
<h3 class="faq-title">Why shouldn't we trust atoms?</h3>
20+
<p class="faq-text">They make up everything</p>
21+
<button class="faq-toggle">
22+
<i class="fas fa-chevron-down"></i>
23+
<i class="fas fa-times"></i>
24+
</button>
25+
</div>
26+
<div class="faq">
27+
<h3 class="faq-title">
28+
What do you call someone with no body and no nose?
29+
</h3>
30+
<p class="faq-text">Nobody knows.</p>
31+
<button class="faq-toggle">
32+
<i class="fas fa-chevron-down"></i>
33+
<i class="fas fa-times"></i>
34+
</button>
35+
</div>
36+
37+
<div class="faq">
38+
<h3 class="faq-title">
39+
What's the object-oriented way to become wealthy?
40+
</h3>
41+
<p class="faq-text">Inheritance.</p>
42+
<button class="faq-toggle">
43+
<i class="fas fa-chevron-down"></i>
44+
<i class="fas fa-times"></i>
45+
</button>
46+
</div>
47+
48+
<div class="faq">
49+
<h3 class="faq-title">
50+
How many tickles does it take to tickle an octopus?
51+
</h3>
52+
<p class="faq-text">Ten-tickles!</p>
53+
<button class="faq-toggle">
54+
<i class="fas fa-chevron-down"></i>
55+
<i class="fas fa-times"></i>
56+
</button>
57+
</div>
58+
59+
<div class="faq">
60+
<h3 class="faq-title">What is: 1 + 1?</h3>
61+
<p class="faq-text">Depends on who are you asking.</p>
62+
<button class="faq-toggle">
63+
<i class="fas fa-chevron-down"></i>
64+
<i class="fas fa-times"></i>
65+
</button>
66+
</div>
67+
</div>
68+
<script src="script.js"></script>
69+
</body>
70+
</html>

‎12-FAQ collapse/script.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const toggles = document.querySelectorAll(".faq-toggle");
2+
3+
toggles.forEach((toggle) => {
4+
toggle.addEventListener("click", () => {
5+
toggle.parentNode.classList.toggle("active");
6+
});
7+
});

‎12-FAQ collapse/style.css

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: "Muli", sans-serif;
9+
background-color: #f0f0f0;
10+
}
11+
12+
h1 {
13+
margin: 50px 0 30px;
14+
text-align: center;
15+
}
16+
17+
.faq-container {
18+
max-width: 600px;
19+
margin: 0 auto;
20+
}
21+
22+
.faq {
23+
background-color: transparent;
24+
border: 1px solid #9fa4a8;
25+
border-radius: 10px;
26+
margin: 20px 0;
27+
padding: 30px;
28+
position: relative;
29+
overflow: hidden;
30+
transition: 0.3 ease;
31+
}
32+
33+
.faq.active {
34+
background-color: #fff;
35+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
36+
}
37+
38+
.faq.active::before,
39+
.faq.active::after {
40+
content: "\f075";
41+
font-family: "Font Awesome 5 Free";
42+
color: #2ecc71;
43+
font-size: 7rem;
44+
position: absolute;
45+
opacity: 0.2;
46+
top: 20px;
47+
left: 20px;
48+
z-index: 0;
49+
}
50+
51+
.faq.active::before {
52+
color: #3498db;
53+
top: -10px;
54+
left: -30px;
55+
transform: rotateY(180deg);
56+
}
57+
58+
.faq-title {
59+
margin: 0 35px 0 0;
60+
}
61+
62+
.faq-text {
63+
display: none;
64+
margin: 30px 0 0;
65+
}
66+
67+
.faq.active .faq-text {
68+
display: block;
69+
}
70+
71+
.faq-toggle {
72+
background-color: transparent;
73+
border: 0;
74+
border-radius: 50%;
75+
cursor: pointer;
76+
display: flex;
77+
align-items: center;
78+
justify-content: center;
79+
font-size: 16px;
80+
padding: 0;
81+
position: absolute;
82+
top: 30px;
83+
right: 30px;
84+
height: 30px;
85+
width: 30px;
86+
}
87+
88+
.faq-toggle:focus {
89+
outline: 0;
90+
}
91+
92+
.faq-toggle .fa-times {
93+
display: none;
94+
}
95+
96+
.faq.active .faq-toggle .fa-times {
97+
color: #fff;
98+
display: block;
99+
}
100+
101+
.faq.active .faq-toggle .fa-chevron-down {
102+
display: none;
103+
}
104+
105+
.faq.active .faq-toggle {
106+
background-color: #9fa4a8;
107+
}

0 commit comments

Comments
 (0)