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 should use the <details> and <summary> elements. These are native HTML elements that provide accordion behavior without any JavaScript at all.
Add a Code Block to your Squarespace page (not Code Injection, but the Code Block within the page editor). Set it to HTML mode and add your FAQ items. Each <details> element wraps one question and answer. The <summary> element is the clickable question. Everything after the summary is the collapsible answer.
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 and inconsistent across browsers. You need CSS to make it look professional. Add these styles to Design → Custom CSS or to a Code Block above your FAQ HTML.
Key styling decisions include the border treatment between items, the expand and collapse indicator (typically a plus sign that rotates to an X or a chevron that rotates), padding and spacing values, and font styles for questions versus answers. Match these to your site's existing design language.
For the toggle animation, CSS transitions on max-height give you a smooth open and close effect. The [open] attribute selector on the details element lets you style the expanded state differently from the collapsed state.
Step 3: Add Smooth Animation
The native details element snaps open and closed instantly. To add a smooth animation, you need a small JavaScript snippet. Add this to your page's footer Code Injection or in a Code Block at the bottom of the page.
The script calculates the height of the answer content and animates the details element from zero height to its natural height. It handles both opening and closing, and it cancels any in-progress animation if the user clicks rapidly.
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.
FAQ rich results can dramatically increase your click-through rate because your listing takes up more visual space in the search results page. Add the JSON-LD script to your page's header Code Injection.
Our Schema Builder can generate FAQ schema automatically. Enter your questions and answers, and it outputs valid JSON-LD ready to paste.
Using Our FAQ Accordion Tool
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
Using divs instead of semantic HTML. When you build an accordion with divs and JavaScript click handlers, you lose built-in accessibility. Screen readers do not know these are expandable sections unless you add ARIA attributes manually. Using <details> and <summary> gives you accessibility for free.
Forgetting mobile touch targets. The clickable area for each question needs to be at least 44 pixels tall. On mobile, users tap with their thumbs, and small touch targets lead to accidental clicks on the wrong question.
Loading a jQuery plugin for accordion functionality. jQuery is a large library (87KB minified) and loading it for a single accordion component is wasteful. The native HTML approach with a small vanilla JavaScript enhancement is lighter, faster, and more maintainable.
Next Steps
Once your FAQ accordion is working, consider adding it to your most important pages. Product pages, service pages, and your homepage are all good candidates. Each FAQ section is also an opportunity to target long-tail keywords that your customers are searching for.
Browse our other Squarespace tools for more ways to enhance your site without plugins.