FAQ Accordion Generator

Build a beautiful FAQ section with auto-generated schema markup for Google rich results.

Why this matters

FAQ sections answer common questions before visitors have to ask, reducing support load and building trust. The generated FAQ schema tells Google to show your Q&As directly in search results, which can dramatically increase your click-through rate.

<!-- FAQ Accordion -->
<style>
  .sqs-faq-container { max-width: 800px; margin: 0 auto; font-family: sans-serif; }
  .sqs-faq-item { border: 1px solid #e5e5e5; border-radius: 4px; margin-bottom: 8px; }
  .sqs-faq-header {
    padding: 18px 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
  }
  .sqs-faq-header:hover { color: #000000; }
  .sqs-faq-body {
    padding: 0 20px 18px 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms ease;
  }
  .sqs-faq-body p {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin: 0;
  }
  .sqs-faq-item.sqs-faq-open .sqs-faq-body { max-height: 500px; }
  .sqs-faq-item.sqs-faq-open .sqs-faq-icon svg { transform: rotate(180deg); }
</style>

<div class="sqs-faq-container">
  <div class="sqs-faq-item">
    <button class="sqs-faq-header" aria-expanded="false">
      <span class="sqs-faq-question">What services do you offer?</span>
      <span class="sqs-faq-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition:transform 300ms ease;"><polyline points="6 9 12 15 18 9"/></svg></span>
    </button>
    <div class="sqs-faq-body">
      <p>We offer a full range of web design, branding, and digital marketing services tailored to small businesses.</p>
    </div>
  </div>
  <div class="sqs-faq-item">
    <button class="sqs-faq-header" aria-expanded="false">
      <span class="sqs-faq-question">How long does a typical project take?</span>
      <span class="sqs-faq-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition:transform 300ms ease;"><polyline points="6 9 12 15 18 9"/></svg></span>
    </button>
    <div class="sqs-faq-body">
      <p>Most projects are completed within 4-6 weeks, depending on scope and complexity.</p>
    </div>
  </div>
  <div class="sqs-faq-item">
    <button class="sqs-faq-header" aria-expanded="false">
      <span class="sqs-faq-question">Do you offer ongoing support?</span>
      <span class="sqs-faq-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition:transform 300ms ease;"><polyline points="6 9 12 15 18 9"/></svg></span>
    </button>
    <div class="sqs-faq-body">
      <p>Yes! We offer monthly maintenance plans to keep your site updated, secure, and performing well.</p>
    </div>
  </div>
</div>

<script>
(function() {
  document.querySelectorAll('.sqs-faq-header').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var item = btn.parentElement;
    document.querySelectorAll('.sqs-faq-item.sqs-faq-open').forEach(function(el) { if (el !== item) el.classList.remove('sqs-faq-open'); });
      item.classList.toggle('sqs-faq-open');
      btn.setAttribute('aria-expanded', item.classList.contains('sqs-faq-open'));
    });
  });
})();
</script>

<!-- FAQ Schema (paste in Code Injection > Footer) -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What services do you offer?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "We offer a full range of web design, branding, and digital marketing services tailored to small businesses."
      }
    },
    {
      "@type": "Question",
      "name": "How long does a typical project take?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Most projects are completed within 4-6 weeks, depending on scope and complexity."
      }
    },
    {
      "@type": "Question",
      "name": "Do you offer ongoing support?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes! We offer monthly maintenance plans to keep your site updated, secure, and performing well."
      }
    }
  ]
}
</script>

How to add this to Squarespace

1. Copy the Accordion Code above.
2. On your Squarespace page, add a Code Block (click + → Code).
3. Paste the code and toggle off “Display Source”.
4. Copy the FAQ Schema code.
5. Go to Settings → Advanced → Code Injection and paste into the Footer.
6. Save and preview. Test your FAQ in Google's Rich Results Test.