How to Add a FAQ Accordion to Squarespace

FAQ sections are one of the most requested features on Squarespace sites, and for good reason. They reduce support emails, improve user experience, and can earn you FAQ rich results in Google search. The problem is that Squarespace does not have a native accordion block.

In this tutorial, you will build a clean, accessible FAQ accordion using Code Injection. No plugins, no monthly fees, no external dependencies. Just HTML, CSS, and a few lines of JavaScript.

Why Build a Custom FAQ Accordion?

Third-party FAQ plugins for Squarespace typically cost between five and fifteen dollars per month. Over a year, that is sixty to one hundred eighty dollars for what is essentially a styled list with toggle functionality. You can build the same thing in fifteen minutes with code that you own and control.

A custom accordion also gives you complete design control. You can match your site's fonts, colors, and spacing exactly. And because the code lives in your site, it loads faster than an external plugin that has to fetch resources from another server.

Step 1: Add the HTML Structure

The foundation of a good FAQ accordion is semantic HTML. Each question-and-answer pair uses the <details> and <summary> elements. These are native HTML elements that provide accordion behavior without any JavaScript at all.

<!-- Paste into a Code Block on your page (HTML mode) -->
<div class="faq-accordion">
  <details>
    <summary>What is your return policy?</summary>
    <div class="faq-answer">
      <p>We offer a full refund within 30 days of purchase.
         Items must be in original condition with tags attached.
         Contact us at support@example.com to start a return.</p>
    </div>
  </details>

  <details>
    <summary>Do you offer free shipping?</summary>
    <div class="faq-answer">
      <p>Yes — free standard shipping on all orders over $50.
         Express shipping is available for $9.99 on any order.</p>
    </div>
  </details>

  <details>
    <summary>How do I track my order?</summary>
    <div class="faq-answer">
      <p>Once your order ships, you will receive an email with
         a tracking number. Click the link to see real-time
         delivery updates from the carrier.</p>
    </div>
  </details>
</div>

This approach is inherently accessible. Screen readers understand <details> and <summary> natively. Keyboard users can tab to each question and toggle it with Enter or Space. You get accessibility compliance for free.

Step 2: Style It with CSS

The default browser styling for details and summary elements is minimal. Add these styles to Design → Custom CSS:

.faq-accordion {
  max-width: 680px;
  margin: 0 auto;
}

.faq-accordion details {
  border-bottom: 1px solid #e5e5e5;
}

.faq-accordion summary {
  padding: 20px 0;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;            /* remove default arrow */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Custom expand/collapse indicator */
.faq-accordion summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  color: #999;
  transition: transform 0.3s ease;
}

.faq-accordion details[open] summary::after {
  content: '−';
}

/* Answer area */
.faq-answer {
  padding: 0 0 20px 0;
  color: #666;
  line-height: 1.7;
}

/* Remove default marker in Safari */
.faq-accordion summary::-webkit-details-marker {
  display: none;
}

Step 3: Add Smooth Animation

The native details element snaps open and closed instantly. To add a smooth animation, add this JavaScript snippet to your page's footer Code Injection:

<script>
document.querySelectorAll('.faq-accordion details').forEach(detail => {
  const content = detail.querySelector('.faq-answer');
  detail.addEventListener('toggle', () => {
    if (detail.open) {
      content.style.maxHeight = content.scrollHeight + 'px';
      content.style.opacity = '1';
    } else {
      content.style.maxHeight = '0px';
      content.style.opacity = '0';
    }
  });
  // Set initial state
  content.style.overflow = 'hidden';
  content.style.transition = 'max-height 0.3s ease, opacity 0.3s ease';
  content.style.maxHeight = '0px';
  content.style.opacity = '0';
});
</script>

Step 4: Add FAQ Schema for Google Rich Results

This is the step most tutorials skip, and it is the most valuable one for SEO. FAQ schema markup tells Google that your page contains frequently asked questions. When Google recognizes this schema, it may display your questions and answers directly in search results as expandable dropdowns.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is your return policy?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "We offer a full refund within 30 days
          of purchase. Items must be in original
          condition with tags attached."
      }
    },
    {
      "@type": "Question",
      "name": "Do you offer free shipping?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes — free standard shipping on all
          orders over $50."
      }
    }
  ]
}
</script>

Writing FAQ schema by hand for a dozen questions is tedious. One missing bracket and the whole thing is invalid.

Skip the Code — Use Our Generator

If you prefer not to write the code yourself, our FAQ Accordion Generator does everything described above. Enter your questions and answers, choose a style preset, and copy the generated code. It outputs the HTML, CSS, and JavaScript together, along with the FAQ schema markup.

The generator handles responsive design, dark mode compatibility, and proper accessibility attributes. It also lets you preview the accordion before copying the code, so you can fine-tune the appearance.

Common Mistakes to Avoid

Next Steps

Once your FAQ accordion is working, add it to your most important pages. Product pages, service pages, and your homepage are all strong candidates. Each FAQ section is also an opportunity to target long-tail keywords that your customers are searching for.