FAQ Accordion Generator

<style>
.faq-container {
  max-width: 700px;
  margin: 0 auto;
  font-family: system-ui, sans-serif;
}
.faq-item {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  background: #ffffff;
}
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border: none;
  background: none;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a2e;
  cursor: pointer;
  text-align: left;
}
.faq-question:hover { background: #6366f115; }
.faq-icon {
  font-size: 19px;
  transition: transform 0.3s ease;
  color: #6366f1;
}
.faq-item.open .faq-icon {
  transform: rotate(180deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.open .faq-answer {
  max-height: 500px;
  padding: 0 18px 14px;
}
.faq-answer p {
  margin: 0;
  font-size: 13px;
  color: #1a1a2e;
  opacity: 0.8;
  line-height: 1.6;
}
</style>

<div class="faq-container">
  <div class="faq-item">
    <button class="faq-question" data-index="0">
      <span>What is this tool?</span>
      <span class="faq-icon">&#8250;</span>
    </button>
    <div class="faq-answer">
      <p>This is a free FAQ accordion generator that creates beautiful, accessible FAQ sections for your website.</p>
    </div>
  </div>
  <div class="faq-item">
    <button class="faq-question" data-index="1">
      <span>How do I use it?</span>
      <span class="faq-icon">&#8250;</span>
    </button>
    <div class="faq-answer">
      <p>Simply add your questions and answers, customize the styling, then copy the generated code and paste it into your website.</p>
    </div>
  </div>
  <div class="faq-item">
    <button class="faq-question" data-index="2">
      <span>Is it free?</span>
      <span class="faq-icon">&#8250;</span>
    </button>
    <div class="faq-answer">
      <p>Yes, this tool is completely free to use. The generated code has no dependencies and works on any website.</p>
    </div>
  </div>
</div>

<script>
(function() {
  document.querySelectorAll(".faq-question").forEach(btn => {
    btn.addEventListener("click", function() {
      const item = this.closest(".faq-item");
      document.querySelectorAll(".faq-item").forEach(i => { if (i !== item) i.classList.remove("open"); });
      item.classList.toggle("open");
    });
  });
})();
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is this tool?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "This is a free FAQ accordion generator that creates beautiful, accessible FAQ sections for your website."
      }
    },
    {
      "@type": "Question",
      "name": "How do I use it?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Simply add your questions and answers, customize the styling, then copy the generated code and paste it into your website."
      }
    },
    {
      "@type": "Question",
      "name": "Is it free?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes, this tool is completely free to use. The generated code has no dependencies and works on any website."
      }
    }
  ]
}
</script>