v1.1.1

Accordion

A vertically stacked set of interactive headings that reveal or hide associated content.

Interactive Requires: veritheme.js JS init: automatic

Default

Only one item can be open at a time. Click an item to expand or collapse it.

html
Yes. It adheres to the WAI-ARIA design pattern. All interactive elements are keyboard accessible and screen reader friendly.
Yes. It comes with default styles that match the other components. You can also customize it with your own CSS or utility classes.
Yes. It includes smooth transitions for opening and closing. The chevron icon rotates to indicate the current state. 
<div class="vt-w-full" data-accordion="single" data-accordion-shift="">
  <div data-accordion-item="">
    <button data-accordion-trigger="" aria-expanded="true">
      Is it accessible?
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-accordion-icon="true" class="lucide lucide-chevron-down vt-rotate-180">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
    </button>
    <div data-accordion-content="" role="region">
      Yes. It adheres to the WAI-ARIA design pattern. All interactive elements are keyboard accessible and screen reader friendly.
    </div>
  </div>
  <div data-accordion-item="">
    <button data-accordion-trigger="" aria-expanded="false">
      Is it styled?
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-accordion-icon="true" class="lucide lucide-chevron-down">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
    </button>
    <div data-accordion-content="" role="region" class="vt-hidden">
      Yes. It comes with default styles that match the other components. You can also customize it with your own CSS or utility classes.
    </div>
  </div>
  <div data-accordion-item="">
    <button data-accordion-trigger="" aria-expanded="false">
      Is it animated?
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-accordion-icon="true" class="lucide lucide-chevron-down">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
    </button>
    <div data-accordion-content="" role="region" class="vt-hidden">
      Yes. It includes smooth transitions for opening and closing. The chevron icon rotates to indicate the current state.
    </div>
  </div>
</div>

Multiple Open

Multiple items can be expanded at the same time.

html
We offer a full refund within 30 days of purchase. No questions asked. Simply contact our support team and we will process your refund.
Yes, we provide 24/7 technical support via email and live chat. Our team typically responds within 2 hours during business hours.
Absolutely! You can upgrade or downgrade your plan at any time from your account settings. Changes take effect immediately. 
<div class="vt-w-full" data-accordion="multiple" data-accordion-shift="">
  <div data-accordion-item="">
    <button data-accordion-trigger="" aria-expanded="false">
      What is your refund policy?
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-accordion-icon="true" class="lucide lucide-chevron-down">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
    </button>
    <div data-accordion-content="" role="region" class="vt-hidden">
      We offer a full refund within 30 days of purchase. No questions asked. Simply contact our support team and we will process your refund.
    </div>
  </div>
  <div data-accordion-item="">
    <button data-accordion-trigger="" aria-expanded="false">
      Do you offer technical support?
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-accordion-icon="true" class="lucide lucide-chevron-down">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
    </button>
    <div data-accordion-content="" role="region" class="vt-hidden">
      Yes, we provide 24/7 technical support via email and live chat. Our team typically responds within 2 hours during business hours.
    </div>
  </div>
  <div data-accordion-item="">
    <button data-accordion-trigger="" aria-expanded="false">
      Can I upgrade my plan later?
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-accordion-icon="true" class="lucide lucide-chevron-down">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
    </button>
    <div data-accordion-content="" role="region" class="vt-hidden">
      Absolutely! You can upgrade or downgrade your plan at any time from your account settings. Changes take effect immediately.
    </div>
  </div>
</div>

With Icons

Accordion items with leading icons for visual context.

html
We accept all major credit cards (Visa, MasterCard, American Express), PayPal, Apple Pay, and Google Pay. All transactions are securely encrypted.
Standard shipping takes 5-7 business days. Express shipping is available for 2-3 day delivery. Free shipping on orders over $50.
Items can be returned or exchanged within 30 days of delivery. Items must be in original condition with tags attached. Return shipping is free. 
<div class="vt-w-full" data-accordion="single" data-accordion-shift="">
  <div data-accordion-item="">
    <button data-accordion-trigger="" aria-expanded="false">
      <span class="vt-flex vt-items-center vt-gap-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-credit-card vt-h-5 vt-w-5 vt-text-foreground-muted">
          <rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line>
        </svg>
        Payment Methods
      </span>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-accordion-icon="true" class="lucide lucide-chevron-down">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
    </button>
    <div data-accordion-content="" role="region" class="vt-pl-8 vt-hidden">
      We accept all major credit cards (Visa, MasterCard, American Express), PayPal, Apple Pay, and Google Pay. All transactions are securely encrypted.
    </div>
  </div>
  <div data-accordion-item="">
    <button data-accordion-trigger="" aria-expanded="false">
      <span class="vt-flex vt-items-center vt-gap-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-truck vt-h-5 vt-w-5 vt-text-foreground-muted">
          <path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"></path><path d="M15 18H9"></path><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"></path><circle cx="17" cy="18" r="2"></circle><circle cx="7" cy="18" r="2"></circle>
        </svg>
        Shipping Info
      </span>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-accordion-icon="true" class="lucide lucide-chevron-down">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
    </button>
    <div data-accordion-content="" role="region" class="vt-pl-8 vt-hidden">
      Standard shipping takes 5-7 business days. Express shipping is available for 2-3 day delivery. Free shipping on orders over $50.
    </div>
  </div>
  <div data-accordion-item="">
    <button data-accordion-trigger="" aria-expanded="false">
      <span class="vt-flex vt-items-center vt-gap-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-refresh-cw vt-h-5 vt-w-5 vt-text-foreground-muted">
          <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path>
        </svg>
        Returns &amp; Exchanges
      </span>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-accordion-icon="true" class="lucide lucide-chevron-down">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
    </button>
    <div data-accordion-content="" role="region" class="vt-pl-8 vt-hidden">
      Items can be returned or exchanged within 30 days of delivery. Items must be in original condition with tags attached. Return shipping is free.
    </div>
  </div>
</div>

Bordered

Each item in a separate bordered container for visual separation.

html
We support React, Vue, Svelte, Angular, and plain HTML/CSS. Each framework has its own set of components and documentation.
You can customize the theme by modifying the CSS variables in your global stylesheet. Override colors, spacing, and border-radius values to match your brand.
Yes, we provide a comprehensive Figma library with all components, variants, and design tokens. It stays in sync with the code implementation. 
<div class="vt-w-full" data-accordion="single" data-accordion-variant="bordered">
  <div data-accordion-item="">
    <button data-accordion-trigger="" aria-expanded="false">
      What frameworks are supported?
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-accordion-icon="true" class="lucide lucide-chevron-down">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
    </button>
    <div data-accordion-content="" role="region" class="vt-hidden">
      We support React, Vue, Svelte, Angular, and plain HTML/CSS. Each framework has its own set of components and documentation.
    </div>
  </div>
  <div data-accordion-item="">
    <button data-accordion-trigger="" aria-expanded="false">
      How do I customize the theme?
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-accordion-icon="true" class="lucide lucide-chevron-down">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
    </button>
    <div data-accordion-content="" role="region" class="vt-hidden">
      You can customize the theme by modifying the CSS variables in your global stylesheet. Override colors, spacing, and border-radius values to match your brand.
    </div>
  </div>
  <div data-accordion-item="">
    <button data-accordion-trigger="" aria-expanded="false">
      Is there a Figma library available?
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-accordion-icon="true" class="lucide lucide-chevron-down">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
    </button>
    <div data-accordion-content="" role="region" class="vt-hidden">
      Yes, we provide a comprehensive Figma library with all components, variants, and design tokens. It stays in sync with the code implementation.
    </div>
  </div>
</div>

Guidelines

Collapsible sections for long secondary content (FAQ, advanced settings). NOT for primary navigation → sidebar/tabs.

Full refund within 30 days of purchase, no questions asked.
Yes, 24/7 via email and live chat.
Do
Use accordions for long, secondary content like FAQ answers.
Go to dashboard
Go to settings
Don't
Don't hide primary navigation inside an accordion — use tabs or a sidebar.
Standard shipping takes 5-7 business days.
Do
Keep triggers short and scannable so users can find the right section.

Anatomy

HTML structure of the Accordion component.

div[data-accordion="single|multiple"]   ← Accordion root
└── div[data-accordion-item]                 ← Single item wrapper
    ├── button[data-accordion-trigger]          ← Clickable header
    │   ├── span                                ← Label text
    │   └── svg[data-accordion-icon]             ← Rotating chevron
    └── div[data-accordion-content]             ← Collapsible panel

API Reference

All data attributes available for the Accordion component.

Class Type Description
data-accordion="single" Base Single-open accordion — only one item expands at a time
data-accordion="multiple" Base Multi-open accordion — multiple items can be open
data-accordion-item Structure Wraps each accordion item (trigger + content)
data-accordion-trigger Structure The clickable header that toggles content
data-accordion-content Structure The collapsible content panel
data-accordion-icon Modifier Chevron icon that rotates on open/close
data-accordion-shift Modifier Adds left-padding shift on item hover
data-accordion-variant="bordered" Variant Each item in a separate rounded bordered container

Accessibility

Keyboard and screen reader support.

Feature Details
Role Triggers use button element, content uses region role
Keyboard Enter and Space toggle the accordion item
ARIA aria-expanded on trigger, aria-controls links trigger to content
Focus Visible focus ring via :focus-visible on trigger buttons
Built with:
Icons