Accordion Base

Fetch pattern JSON: curl https://webspire.de/patterns/accordion/base.json

base.html

<div class="ws-accordion mx-auto max-w-2xl">
  <details class="group">
    <summary class="flex cursor-pointer items-center justify-between py-4 text-left font-medium text-[var(--ws-accordion-text)]">
      What payment methods do you accept?
      <svg class="h-5 w-5 shrink-0 text-[var(--ws-accordion-icon)] transition-transform duration-200 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
    </summary>
    <div class="pb-4 text-sm text-[var(--ws-accordion-text-soft)]">
      We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers. Enterprise customers can also pay via invoice with NET-30 terms.
    </div>
  </details>

  <details class="group">
    <summary class="flex cursor-pointer items-center justify-between py-4 text-left font-medium text-[var(--ws-accordion-text)]">
      Can I cancel my subscription?
      <svg class="h-5 w-5 shrink-0 text-[var(--ws-accordion-icon)] transition-transform duration-200 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
    </summary>
    <div class="pb-4 text-sm text-[var(--ws-accordion-text-soft)]">
      Yes, you can cancel anytime from your account settings. Your access continues until the end of the current billing period. No cancellation fees apply.
    </div>
  </details>

  <details class="group">
    <summary class="flex cursor-pointer items-center justify-between py-4 text-left font-medium text-[var(--ws-accordion-text)]">
      Do you offer a free trial?
      <svg class="h-5 w-5 shrink-0 text-[var(--ws-accordion-icon)] transition-transform duration-200 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
    </summary>
    <div class="pb-4 text-sm text-[var(--ws-accordion-text-soft)]">
      We offer a 14-day free trial on all plans with full feature access. No credit card required to start. You'll receive a reminder before the trial ends.
    </div>
  </details>
</div>

Details

Family

accordion

Tier

base

Kind

component

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

accordiondetailssummarycollapsibleexpandabledisclosure

Slots

Name	Required	Description
title	Yes	Summary/trigger text for each item.
content	Yes	Expandable body content.

Minimal accordion built entirely on native <details> and <summary> elements. No JavaScript needed — the browser handles expand/collapse. Chevron icon rotates smoothly on open via Tailwind’s group-open modifier.