Web Designer Wall

Snippets Accordion

Bootstrap 5 Material-Style Accordion with Icons

An icon-led accordion in the style of a help-center FAQ where one section stays open at a time and the open card lifts slightly above the rest.

Bootstrap 5 No jQuery Mar 2020 2.4K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 720px">
    <div class="text-center mb-4 mb-md-5">
      <span class="wdw-eyebrow mb-2">Help center</span>
      <h1 class="wdw-heading display-6 mb-2">Answers to common questions</h1>
      <p class="wdw-muted mb-0">Open a topic to read more. One section stays open at a time.</p>
    </div>
    <div class="accordion wdw-faq" id="helpAccordion">
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq0" aria-expanded="true" aria-controls="faq0">
              <span class="wdw-icon me-3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 15c-1.5 1-2 4-2 6 2 0 5-.5 6-2M14 4c3-1 6-1 7-1 0 1 0 4-1 7l-6 6-5-5zM9 13l-4-1 3-4 4 0M11 15l1 4 4-3 0-4"/></svg></span>Getting started
            </button>
          </h2>
          <div id="faq0" class="accordion-collapse collapse show" data-bs-parent="#helpAccordion">
            <div class="accordion-body wdw-muted pt-0">Create your workspace, invite a teammate and publish your first project in under ten minutes. The setup checklist on your dashboard walks you through each step.</div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq1" aria-expanded="false" aria-controls="faq1">
              <span class="wdw-icon me-3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18M7 15h3"/></svg></span>Billing and invoices
            </button>
          </h2>
          <div id="faq1" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
            <div class="accordion-body wdw-muted pt-0">Switch plans at any time. Changes apply on your next billing date, and every invoice is available as a PDF from the billing page.</div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2" aria-expanded="false" aria-controls="faq2">
              <span class="wdw-icon me-3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/><path d="m9 12 2 2 4-4"/></svg></span>Security and privacy
            </button>
          </h2>
          <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
            <div class="accordion-body wdw-muted pt-0">Your data is encrypted in transit and at rest. Turn on two-factor authentication under Account settings to protect sign-ins.</div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3" aria-expanded="false" aria-controls="faq3">
              <span class="wdw-icon me-3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M18 14a6.5 6.5 0 0 1 3.5 6"/></svg></span>Teams and permissions
            </button>
          </h2>
          <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
            <div class="accordion-body wdw-muted pt-0">Assign roles such as owner, editor or viewer to each member, and group people into teams to share projects in one step.</div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4" aria-expanded="false" aria-controls="faq4">
              <span class="wdw-icon me-3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 3v5M15 3v5M6 8h12v3a6 6 0 0 1-12 0zM12 17v4"/></svg></span>Integrations
            </button>
          </h2>
          <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
            <div class="accordion-body wdw-muted pt-0">Connect Slack, GitHub and Google Drive from the integrations page. Each connection can be paused or removed without losing history.</div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq5" aria-expanded="false" aria-controls="faq5">
              <span class="wdw-icon me-3"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5h16v11H8l-4 4z"/></svg></span>Contact support
            </button>
          </h2>
          <div id="faq5" class="accordion-collapse collapse" data-bs-parent="#helpAccordion">
            <div class="accordion-body wdw-muted pt-0">Not finding an answer? Our team replies to every message within one working day, usually much sooner.</div>
          </div>
        </div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More accordion snippets