Web Designer Wall

Snippets Accordion

Bootstrap 5 Image Accordion Product Showcase

A product accordion of kitchen style collections: image panels that expand on hover or tap to reveal a short description, price and add-to-cart button, with a live cart counter.

Bootstrap 5 No jQuery Mar 2020 2.1K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1040px">
    <div class="d-flex align-items-center justify-content-between mb-4">
      <div>
        <span class="wdw-eyebrow">Kitchen collections</span>
        <h1 class="wdw-heading h3 mb-0 mt-1">Find your style</h1>
      </div>
      <button class="btn btn-outline-primary rounded-pill" type="button" id="wdwCartBtn">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/><path d="M2 3h3l2.7 12.4a1 1 0 0 0 1 .8h8.8a1 1 0 0 0 1-.8L20 7H6"/></svg>
        Checkout <span class="badge text-bg-primary rounded-pill" id="wdwCartCount">0</span>
      </button>
    </div>
    <div class="wdw-accordion" id="wdwAccordion">
      <div class="wdw-panel" style="--img:url('https://images.unsplash.com/photo-1556912172-45b7abe8b7e1?auto=format&fit=crop&w=1200&q=75')">
        <button class="wdw-panel-btn" type="button" aria-expanded="false" aria-controls="wdwP0">
          <span class="wdw-panel-title">Rustic</span>
        </button>
        <div class="wdw-panel-body" id="wdwP0">
          <p class="mb-1 fw-semibold">Warm timber, open shelving, honest materials.</p>
          <p class="mb-2 small opacity-75">From $12,400</p>
          <button type="button" class="btn btn-light btn-sm rounded-pill px-3 add-item">Add to cart</button>
        </div>
      </div>
      <div class="wdw-panel is-open" style="--img:url('https://images.unsplash.com/photo-1484154218962-a197022b5858?auto=format&fit=crop&w=1200&q=75')">
        <button class="wdw-panel-btn" type="button" aria-expanded="true" aria-controls="wdwP1">
          <span class="wdw-panel-title">Clean</span>
        </button>
        <div class="wdw-panel-body" id="wdwP1">
          <p class="mb-1 fw-semibold">Flat-front cabinets and a calm, minimal palette.</p>
          <p class="mb-2 small opacity-75">From $14,900</p>
          <button type="button" class="btn btn-light btn-sm rounded-pill px-3 add-item">Add to cart</button>
        </div>
      </div>
      <div class="wdw-panel" style="--img:url('https://images.unsplash.com/photo-1495433324511-bf8e92934d90?auto=format&fit=crop&w=1200&q=75')">
        <button class="wdw-panel-btn" type="button" aria-expanded="false" aria-controls="wdwP2">
          <span class="wdw-panel-title">Stylish</span>
        </button>
        <div class="wdw-panel-body" id="wdwP2">
          <p class="mb-1 fw-semibold">Statement lighting with bold stone surfaces.</p>
          <p class="mb-2 small opacity-75">From $18,200</p>
          <button type="button" class="btn btn-light btn-sm rounded-pill px-3 add-item">Add to cart</button>
        </div>
      </div>
      <div class="wdw-panel" style="--img:url('https://images.unsplash.com/photo-1507089947368-19c1da9775ae?auto=format&fit=crop&w=1200&q=75')">
        <button class="wdw-panel-btn" type="button" aria-expanded="false" aria-controls="wdwP3">
          <span class="wdw-panel-title">Family</span>
        </button>
        <div class="wdw-panel-body" id="wdwP3">
          <p class="mb-1 fw-semibold">Durable, roomy layouts built for busy mornings.</p>
          <p class="mb-2 small opacity-75">From $13,600</p>
          <button type="button" class="btn btn-light btn-sm rounded-pill px-3 add-item">Add to cart</button>
        </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.

Related snippets

More accordion snippets