A pricing FAQ section answers the objections and uncertainties that prevent visitors from converting on your pricing page. Common blockers — "Is there a free plan?", "What happens if I exceed my limit?", "Do you offer refunds?" — prevent sign-ups when left unanswered. A well-placed FAQ section below the pricing tiers can lift conversion by 10–30% by removing uncertainty before the user decides to leave. This snippet provides a complete pricing FAQ accordion with 7 pre-filled billing questions, a max-height CSS transition, + icon rotation, aria-expanded accessibility, and a talk-to-sales CTA block.

How the accordion works

Each FAQ item has an .open class toggle. On the closed state, .faq-a has max-height: 0 and overflow: hidden. On .open, max-height: 300px. CSS transition: max-height 0.3s ease animates the expand and collapse. This is the standard CSS accordion technique — max-height must be set to a value larger than any possible content height (300px covers most FAQ answers).

The + icon rotation

The plus sign in .faq-icon rotates 45 degrees on .open via transform: rotate(45deg) — turning + into ×. The transition: transform 0.25s animates the rotation smoothly. No SVG or separate close icon is needed.

Accordion vs multi-open

The toggle() function closes all other items before opening the clicked one — accordion single-open behaviour. This is standard for FAQ sections because it prevents the page from becoming very tall when multiple items are open. To allow multiple items open simultaneously, remove the "Close all" querySelectorAll block.

Accessibility

Each question button has aria-expanded="false" in the closed state and "true" when open. Screen readers announce "expanded" or "collapsed" when the user toggles an item. The accordion uses button elements (keyboard-focusable) rather than div elements, ensuring keyboard users can Tab to each question and Enter to toggle.

The 7 pre-filled billing questions

The questions cover the most common pricing objections: free plan availability, plan changes, payment methods, annual discount, limit behaviour, refund policy, and non-profit/student discounts. Update the answers to match your actual terms. Add or remove questions by duplicating or removing .faq-item elements.

The talk-to-sales CTA block

The gradient CTA block at the bottom catches visitors whose question was not answered in the FAQ. "Talk to sales" is a lower-commitment CTA than "Buy now" — it works for enterprise and high-ACV products where prospects need human contact before converting.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to trace the max-height accordion trick by hand. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why the closed state needs both max-height 0 and overflow hidden together, and why the toggle function closes every other faq-item before opening the clicked one instead of allowing multiple items open at once. The same assistant can help optimize it, for example checking whether the fixed max-height of 300px used for the open state will ever clip a longer answer, and how you'd calculate that value dynamically from the content's real scrollHeight instead. It's also useful for extending the effect: ask it to add FAQPage JSON-LD schema markup so Google can show rich snippets for these questions, convert it to a multi-open accordion instead of single-open, or add a search box that filters the visible questions as the user types. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a single-open FAQ accordion section for a pricing page in plain HTML, CSS, and vanilla JavaScript, with no animation library.

Requirements:
- A list of FAQ items, each with a clickable button-element question row (showing the question text and a plus-sign icon) and a collapsible answer paragraph beneath it, plus a unique identifier on each item.
- The collapsed state of every answer must use max-height: 0 combined with overflow: hidden, and a CSS transition on max-height; the open state must set max-height to a fixed value large enough to fit realistic answer lengths, so opening and closing animates smoothly rather than snapping instantly.
- The plus-sign icon must visually rotate 45 degrees (turning it into an X shape) via a CSS transform transition whenever its item is open, with no separate close-icon asset needed.
- Clicking any question must enforce single-open accordion behavior: first close every other currently-open item, then open the clicked item only if it was not already open (so clicking an already-open item's question closes it without reopening anything).
- Every question button must carry an aria-expanded attribute that is kept in sync with true or false as items open and close, so assistive technology can announce the current state correctly.
- Include a header area with a short intro and a contact link, plus a distinctly styled call-to-action block at the bottom of the FAQ list (a gradient-tinted panel with a "talk to sales" style button) aimed at visitors whose question wasn't answered.

Step by step

How to Use

1
Click any question to expand or collapse itClicking a question expands the answer with a smooth max-height CSS transition. Clicking again or clicking another question closes it (accordion behaviour). The + icon rotates to × on open.
2
Update the questions and answersIn the HTML, edit the span text inside each .faq-q button for the question, and the p text inside each .faq-a div for the answer. Update all 7 answers to match your actual pricing terms, refund policy, and plan limits.
3
Add more FAQ itemsDuplicate any .faq-item div. Give it a unique data-id (8, 9, etc.) and update the onclick="toggle(N)" to match. Update the question and answer text. The accordion logic picks up the new item automatically.
4
Update the CTA blockEdit the .cta-text paragraph and the .cta-btn link text. Set href="#" on .cta-btn to your contact, sales, or chat URL. Update the .contact-link href in the header to your support email or help page.
5
Change the first item default open stateThe first .faq-item starts with the .open class applied. To start all closed, remove .open from the first item and set aria-expanded="false" on its button. To start multiple items open, this requires switching to multi-open mode (remove the close-all block in toggle()).
6
Export in your formatClick "HTML" for a standalone file, "JSX" for a React component with useState for the open item id, or "Tailwind" for a React + Tailwind CSS version.

Real-world uses

Common Use Cases

Below-the-fold pricing page objection handling

Place the FAQ section directly below the tier cards on your pricing page. It catches visitors who are interested but have a blocker question. Answering "Is there a free plan?" and "Do you offer refunds?" eliminates the two most common pricing page exit triggers.

Checkout and sign-up flow billing question panel

Embed a condensed 3–4 question FAQ in the sidebar of your checkout page addressing payment methods, security, and cancellation. Reducing billing uncertainty at the payment step directly increases checkout completion rates.

SaaS product pricing documentation and help pages

Expand beyond 7 questions to create a comprehensive billing FAQ for your support documentation. Group questions by topic using section headings. The accordion keeps long FAQ lists compact and scannable.

Study the CSS max-height accordion animation technique

The max-height: 0 to max-height: N transition is the standard CSS-only accordion pattern, shared with the general-purpose accordion FAQ snippet. The key constraint: max-height in the open state must be larger than any possible content height. If content is taller than max-height, it will be clipped. This snippet uses 300px — sufficient for most FAQ answers.

Landing page question sections for any product or service

The FAQ accordion pattern applies to any product, service, or event page. Adapt the questions to your domain: a course landing page FAQ ("What is included?", "Who is this for?", "Is there a certificate?"), a SaaS FAQ, or an event registration FAQ.

Enterprise and high-ACV product talk-to-sales conversion

For enterprise products with high annual contract values, the talk-to-sales CTA block is more important than the self-serve sign-up CTA. Place it prominently after the FAQ. Add a Calendly embed link or sales chat trigger for immediate human contact.

Got questions?

Frequently Asked Questions

The .faq-a answer div has max-height: 0; overflow: hidden in its default state. CSS transition: max-height 0.3s ease is applied. When .open is added to the parent .faq-item, the CSS rule .faq-item.open .faq-a { max-height: 300px } applies, triggering the transition. The browser interpolates max-height from 0 to 300px over 0.3 seconds. On close, max-height transitions back to 0. The max-height value must be set higher than any possible content height — if content exceeds 300px, increase the open state max-height value.

Remove the "close all" block inside the toggle() function: delete the document.querySelectorAll(".faq-item").forEach(el => { el.classList.remove("open"); el.querySelector(".faq-q").setAttribute("aria-expanded","false"); }); lines. The remaining code only toggles the clicked item. This switches from accordion (single-open) to multi-open mode. For pricing FAQ sections, accordion is usually preferable as it keeps the page height controlled.

Add a script tag with type="application/ld+json" containing FAQPage schema: {"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Is there a free plan?","acceptedAnswer":{"@type":"Answer","text":"Yes — our Starter plan is free forever..."}},...]}. One Question/Answer object per FAQ item. Google may display FAQ rich results in search snippets for pages that include this structured data — expanding the search result with the question and answer directly in the SERP.

Click "JSX" to download. Manage const [openId, setOpenId] = useState(1) for accordion mode (1 = first item open by default). The toggle function: const toggle = id => setOpenId(prev => prev === id ? null : id). Apply open class conditionally: className={"faq-item" + (openId === item.id ? " open" : "")}. For Next.js SEO, render the FAQ schema JSON-LD in a script tag inside the head using next/head, or use the metadata API for App Router pages.

Loading…