Text Box With hidden Text Box : FAQ Style
Text Box With hidden Text Box : FAQ Style
Code: -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ Section</title>
</head>
<body>
<div style="width: 100%; max-width: 600px; margin: auto; font-family: Arial, sans-serif;">
<h2>People also ask</h2>
<!-- FAQ Item 1 -->
<div style="border-bottom: 1px solid #ddd; padding: 10px 0;" class="faq-item">
<div onclick="toggleFAQ(this)" style="cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: bold; color: #333;">
What does FAQ mean for?
<span style="font-size: 18px; transition: transform 0.3s;" class="arrow">▼</span>
</div>
<div style="display: none; margin-top: 5px; color: #555;" class="faq-answer">
FAQ stands for Frequently Asked Questions.
</div>
</div>
<!-- FAQ Item 2 -->
<div style="border-bottom: 1px solid #ddd; padding: 10px 0;" class="faq-item">
<div onclick="toggleFAQ(this)" style="cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: bold; color: #333;">
What do the letters FAQ stand for?
<span style="font-size: 18px; transition: transform 0.3s;" class="arrow">▼</span>
</div>
<div style="display: none; margin-top: 5px; color: #555;" class="faq-answer">
FAQ stands for Frequently Asked Questions.
</div>
</div>
<!-- FAQ Item 3 -->
<div style="border-bottom: 1px solid #ddd; padding: 10px 0;" class="faq-item">
<div onclick="toggleFAQ(this)" style="cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: bold; color: #333;">
Why is it called FAQ?
<span style="font-size: 18px; transition: transform 0.3s;" class="arrow">▼</span>
</div>
<div style="display: none; margin-top: 5px; color: #555;" class="faq-answer">
It's called FAQ because it answers common questions people have.
</div>
</div>
<!-- FAQ Item 4 -->
<div style="border-bottom: 1px solid #ddd; padding: 10px 0;" class="faq-item">
<div onclick="toggleFAQ(this)" style="cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: bold; color: #333;">
What is the full form of FAQ page?
<span style="font-size: 18px; transition: transform 0.3s;" class="arrow">▼</span>
</div>
<div style="display: none; margin-top: 5px; color: #555;" class="faq-answer">
The full form of FAQ page is Frequently Asked Questions page.
</div>
</div>
</div>
<script>
function toggleFAQ(element) {
const faqItem = element.parentElement;
const answer = faqItem.querySelector(".faq-answer");
const arrow = element.querySelector(".arrow");
if (answer.style.display === "none" || answer.style.display === "") {
answer.style.display = "block";
arrow.style.transform = "rotate(180deg)";
} else {
answer.style.display = "none";
arrow.style.transform = "rotate(0deg)";
}
}
</script>
</body>
</html>
Output: -
Question and Answer
People also ask:
What does FAQ mean for?
▼
What do the letters FAQ stand for?
▼
Why is it called FAQ?
▼
What is the full form of FAQ page?
▼
Comments
Post a Comment