The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<section class="faq">
  <h2>Frequently asked questions</h2>
  <div class="list">
    <details open>
      <summary>Is there a free plan?</summary>
      <p>Yes. The Starter plan is free forever and includes one project and basic analytics.</p>
    </details>
    <details>
      <summary>Can I cancel at any time?</summary>
      <p>You can cancel from your account settings in two clicks. You keep access until the end of the billing period.</p>
    </details>
    <details>
      <summary>Do you offer student discounts?</summary>
      <p>Students and teachers get 50% off the Pro plan. Verify with your college email address.</p>
    </details>
    <details>
      <summary>Which payment methods do you accept?</summary>
      <p>UPI, all major credit and debit cards, and net banking for annual plans.</p>
    </details>
  </div>
</section>

The AI prompt

Paste this into an AI coding tool to generate the same section, then ask it to adapt the colours, text or framework to your project.

Build an accessible FAQ accordion section using only HTML and CSS (no JavaScript).

Requirements:
- Use the native <details> and <summary> elements for each question so it works with keyboard and screen readers automatically. The first item is open by default.
- Four questions about a SaaS product: free plan, cancelling, student discounts, payment methods (mention UPI).
- Centred heading "Frequently asked questions"; the list is max 760px wide with 12px gaps.

Styling:
- Each item: 1px #e8e9f0 border, 14px radius. When open, the border becomes translucent indigo.
- Summary: flex row with the question on the left and a circular "+" icon on the right, created with summary::after. Hide the default disclosure triangle (list-style: none and ::-webkit-details-marker).
- Rotate the "+" by 45 degrees when the item is open so it becomes an "x".
- Visible focus outline on summary:focus-visible.
- Answer text in grey with 1.7 line-height.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Use details and summary. The browser handles open/close, keyboard support (Enter and Space) and accessibility for free.

2. 2

   Remove the default triangle with list-style: none on summary plus the ::-webkit-details-marker rule for Safari.

3. 3

   Add your own indicator with summary::after and lay out the summary with flex and space-between.

4. 4

   Use the details[open] attribute selector to style the open state and rotate the icon.

5. 5

   Keep a clear focus-visible outline so keyboard users can see where they are.

Customisation tips

• Give several details elements the same name attribute to make only one open at a time (an exclusive accordion) in modern browsers.
• Add FAQPage JSON-LD structured data with the same questions to become eligible for rich results in search.
• Write questions the way customers ask them, not the way your team describes the feature.

More sections