<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin
=
"anonymous"
referrerpolicy
=
"no-referrer"
/>
<
style
>
@import url(
.container {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -20%);
width: 60%;
}
h1 {
text-align: center;
font-family: "Roboto Slab", serif;
font-size: 40px;
}
li {
list-style: none;
margin-bottom: 10px;
padding: 15px;
border-bottom: 2px solid #6d6b6b;
}
.question {
font-family: "Spartan", sans-serif;
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
position: relative;
color: #5c5a5a;
}
.icon-main {
position: absolute;
right: 0px;
cursor: pointer;
}
.non-active {
display: none;
}
.answer {
font-size: 17px;
font-family: "Spartan", sans-serif;
}
</
style
>
<
title
>FAQs</
title
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
h1
>FAQs</
h1
>
<
ul
>
<
li
class
=
"faq"
>
<
div
class
=
"question"
>
Which is the best portal to study
Computer Science?
<
span
class
=
"icon-main"
>
<
i
class
=
"fa-solid fa-plus"
></
i
>
</
span
>
</
div
>
<
div
class
=
"answer non-active"
>
GeeksforGeeks is the best Computer
Science portal for geeks. It contains
well written, well thought and well
explained computer science and
programming articles.
</
div
>
</
li
>
<
li
class
=
"faq"
>
<
div
class
=
"question"
>
What is a FAQ section?
<
span
class
=
"icon-main"
>
<
i
class
=
"fa-solid fa-plus"
></
i
>
</
span
>
</
div
>
<
p
class
=
"answer non-active"
>
the Frequently Asked Questions (FAQ)
section is a part of your website
where you address common concerns,
questions,and objections that
customers have.
</
p
>
</
li
>
<
li
class
=
"faq"
>
<
div
class
=
"question"
>
What should be included in a FAQ section?
<
span
class
=
"icon-main"
>
<
i
class
=
"fa-solid fa-plus"
></
i
>
</
span
>
</
div
>
<
p
class
=
"answer non-active"
>
Fully answer the question, don't
just link to a different page.
</
p
>
</
li
>
</
ul
>
</
div
>
<
script
>
const faqs = document.querySelectorAll(".faq");
for (const item of faqs) {
const curr_faq = item.childNodes;
console.log(curr_faq);
const question = curr_faq[1];
const answer = curr_faq[3];
const icon = question.querySelector(".icon-main");
icon.addEventListener("click", function () {
answer.classList.toggle("non-active");
const i = icon.querySelector("i");
i.classList.toggle("fa-xmark");
i.classList.toggle("fa-plus");
});
}
</
script
>
</
body
>
</
html
>