Skip to content
  • No data uploaded
  • Instant results
UI Component Generator

Bootstrap 5 FAQ Accordion for Vanilla JS — Glassmorphism

A production-ready glassmorphism faq accordion: a frequently-asked-questions section with four expandable items, each toggled by a button that exposes its state via aria-expanded. Pick your brand color, toggle dark mode and corner radius — the live preview and the Vanilla JS code update instantly in your browser.

Live component editor

Library
ReactVueHTML
Framework
TailwindBootstrap
Style
MinimalGlass
Theme
Corner radius
Live preview 
<!-- Requires Bootstrap 5.3 CSS + theme.css:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="theme.css"> -->
<section class="px-4 py-5">
  <div class="mw-2xl mx-auto">
    <h2 class="fs-3 fw-bold text-center text-body-emphasis">Frequently asked questions</h2>
    <div class="mt-5 d-flex flex-column gap-2">
      <div class="glass shadow-lg rounded-3">
        <button type="button" class="w-100 d-flex align-items-center justify-content-between gap-3 px-3 py-3 text-start fw-semibold text-body-emphasis" data-toggle="q1" data-expanded="q1" aria-expanded="true" aria-controls="faq-a1">
          <span>Can I cancel anytime?</span><span class="fs-5 fw-bold text-brand" aria-hidden="true">+</span>
        </button>
        <div id="faq-a1" data-show="q1">
          <p class="px-3 pb-3 small lh-lg text-body-secondary">Yes. Cancel from your billing page and you keep access until the end of the period.</p>
        </div>
      </div>
      <div class="glass shadow-lg rounded-3">
        <button type="button" class="w-100 d-flex align-items-center justify-content-between gap-3 px-3 py-3 text-start fw-semibold text-body-emphasis" data-toggle="q2" data-expanded="q2" aria-expanded="false" aria-controls="faq-a2">
          <span>Do you offer a free trial?</span><span class="fs-5 fw-bold text-brand" aria-hidden="true">+</span>
        </button>
        <div id="faq-a2" data-show="q2" hidden>
          <p class="px-3 pb-3 small lh-lg text-body-secondary">Every paid plan starts with a 14-day free trial — no credit card required.</p>
        </div>
      </div>
      <div class="glass shadow-lg rounded-3">
        <button type="button" class="w-100 d-flex align-items-center justify-content-between gap-3 px-3 py-3 text-start fw-semibold text-body-emphasis" data-toggle="q3" data-expanded="q3" aria-expanded="false" aria-controls="faq-a3">
          <span>Which payment methods do you accept?</span><span class="fs-5 fw-bold text-brand" aria-hidden="true">+</span>
        </button>
        <div id="faq-a3" data-show="q3" hidden>
          <p class="px-3 pb-3 small lh-lg text-body-secondary">All major cards, UPI, netbanking and invoicing for annual plans.</p>
        </div>
      </div>
      <div class="glass shadow-lg rounded-3">
        <button type="button" class="w-100 d-flex align-items-center justify-content-between gap-3 px-3 py-3 text-start fw-semibold text-body-emphasis" data-toggle="q4" data-expanded="q4" aria-expanded="false" aria-controls="faq-a4">
          <span>Is my data secure?</span><span class="fs-5 fw-bold text-brand" aria-hidden="true">+</span>
        </button>
        <div id="faq-a4" data-show="q4" hidden>
          <p class="px-3 pb-3 small lh-lg text-body-secondary">Data is encrypted in transit and at rest, and we never sell personal information.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
  (() => {
    const state = { q1: true, q2: false, q3: false, q4: false };
    const actions = {  };
    const pair = (s) => s.split(':');
    const sync = () => {
      document.querySelectorAll('[data-show]').forEach((el) => (el.hidden = !state[el.dataset.show]));
      document.querySelectorAll('[data-hide]').forEach((el) => (el.hidden = !!state[el.dataset.hide]));
      document.querySelectorAll('[data-when]').forEach((el) => { const [k, v] = pair(el.dataset.when); el.hidden = state[k] !== v; });
      document.querySelectorAll('[data-pressed]').forEach((el) => { const [k, v] = pair(el.dataset.pressed); el.setAttribute('aria-pressed', String(state[k] === v)); });
      document.querySelectorAll('[data-expanded]').forEach((el) => el.setAttribute('aria-expanded', String(!!state[el.dataset.expanded])));
    };
    document.addEventListener('click', (e) => {
      const t = e.target.closest('[data-toggle],[data-open],[data-close],[data-set],[data-call]');
      if (!t) return;
      const { toggle, open, close, set, call } = t.dataset;
      if (call) actions[call]?.(e);
      if (toggle) state[toggle] = !state[toggle];
      if (open) state[open] = true;
      if (close) state[close] = false;
      if (set) { const [k, v] = pair(set); state[k] = v; }
      sync();
    });
    sync();
  })();
</script>

More Bootstrap components for Vanilla JS

All components →

Free Bootstrap 5 FAQ Accordion for Vanilla JS — Glassmorphism by pGento

Install Bootstrap 5 for Vanilla JS

Include Bootstrap 5.3 from the CDN (or npm install bootstrap) and the generated theme.css:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="theme.css">

Use the faq accordion in Vanilla JS

Paste the markup where the component should appear. The small inline <script> wires up the interactive state with one delegated click listener — no framework needed.

Accessibility & customization

Each question is a <button> with aria-expanded and aria-controls pointing at its answer panel, so screen readers announce open/closed state and keyboard users can operate it with Enter or Space.

Every color, radius and dark-mode choice is baked into plain Bootstrap classes plus a tiny CSS-variable theme file, so the copied code has no runtime dependency on this site. The glass style relies on backdrop-filter, supported in all current browsers; place it over a colorful background for the best effect.

Compatibility

ItemDetails
CSS frameworkBootstrap 5.3+ (CSS only)
LibraryPlain HTML + optional vanilla JS
Interactive stateq1, q2, q3, q4
Dark modeYes — toggle in the editor
StyleGlassmorphism (backdrop blur)

Frequently asked questions

How do I install this Bootstrap faq accordion in Vanilla JS?
Create a web page, install Bootstrap 5 as shown in the installation section, then paste the generated code. Also save the generated theme.css file.
Can I change the color of the faq accordion?
Yes. Use the brand color picker or type any hex code — the preview and code update instantly, and the color is written directly into the classes you copy.
Does the faq accordion support dark mode?
Yes. Toggle “Dark mode” in the editor to generate a dark palette version of the same component.
Is the faq accordion accessible?
Each question is a <button> with aria-expanded and aria-controls pointing at its answer panel, so screen readers announce open/closed state and keyboard users can operate it with Enter or Space.
Is this component free for commercial use?
Yes. The generated code is yours to use in personal and commercial projects without attribution.
Bootstrap 5 FAQ Accordion for Vanilla JS — Glassmorphism

Embed this tool on your site

Paste this code into any web page. It stays free, fast and ad-free inside your site.

Print or save as PDF

Prints just this tool and its result. Choose “Save as PDF” as the printer to get a file. Branding is stored only in this browser.