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? ▼

FAQ stands for Frequently Asked Questions.

What do the letters FAQ stand for? ▼

FAQ stands for Frequently Asked Questions.

Why is it called FAQ? ▼

It's called FAQ because it answers common questions people have.

What is the full form of FAQ page? ▼

The full form of FAQ page is Frequently Asked Questions page.