Free Section

Interactive FAQ Search Section

A customer support FAQ section featuring a live real-time search input that filters question accordions on keypress.

light
faq
accordion
search
filter
questions
support

The code

Plain HTML, CSS and JavaScript 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-s-sec">
  <div class="faq-s-wrap">
    <div class="faq-s-head">
      <span class="faq-s-badge">Help Center</span>
      <h2>Frequently Asked Questions</h2>
      <p>Have questions? Search our knowledge base or browse popular topics below.</p>
      <div class="faq-search-bar">
        <input type="search" id="faqSearchInput" placeholder="Search questions: pricing, API, security..." />
      </div>
    </div>

    <div class="faq-accordions" id="faqAccordionList">
      <details class="faq-item" data-q="how do subscriptions and billing work monthly annual refund">
        <summary>How does the billing and refund policy work?</summary>
        <div class="faq-answer">
          We offer transparent monthly and annual billing in both USD and INR. You can cancel your subscription at any time with one click. If you are unsatisfied within the first 14 days, contact support for a no-questions-asked refund.
        </div>
      </details>

      <details class="faq-item" data-q="can i use templates for commercial client work projects copyright">
        <summary>Can I use these UI templates for commercial client work?</summary>
        <div class="faq-answer">
          Yes! All templates and components are 100% free for both personal and commercial client projects. No attribution is required, though sharing a link back is always appreciated.
        </div>
      </details>

      <details class="faq-item" data-q="which ai tools are supported claude cursor chatgpt v0 bolt">
        <summary>Which AI coding tools work with the prompts?</summary>
        <div class="faq-answer">
          The prompts are tested and tuned for Claude 3.5 Sonnet, ChatGPT (GPT-4o), Cursor, v0, Bolt, and Google Gemini. Tools that support file scaffolding like Cursor and v0 work best for full website generation.
        </div>
      </details>

      <details class="faq-item" data-q="what happens if my api rate limit is exceeded usage">
        <summary>What happens if my team exceeds the monthly execution limits?</summary>
        <div class="faq-answer">
          We never shut down production traffic. If your usage exceeds plan capacity, we notify you and bill soft overages at standard pay-as-you-go rates without disruption.
        </div>
      </details>
    </div>
  </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.

Works with Claude · ChatGPT · Cursor · v0 · Bolt · Gemini

Create a responsive FAQ section with instant live client-side search in HTML, CSS and vanilla JavaScript.

Requirements:
- Centered header with search input box.
- List of questions using native semantic <details> and <summary> tags.
- Custom open/close plus/minus icon indicators on summary.
- JavaScript input listener that filters questions instantly based on keywords.

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1
Use semantic <details> and <summary> for accessible, native accordion behavior.
2
Add data-q search attribute with keywords for each item.
3
Filter item display on input keypress using JavaScript.