Accordion

Collapsible content sections using native <details> element. No JavaScript required.

Basic

What is UX?

UX is a zero-dependency, framework-agnostic CSS component library with iOS-style design.

How do I install it?

Just add the CSS file to your project. No build step required.

Does it work with React?

Yes! It works with any framework — React, Vue, HTMX, or vanilla HTML.

<div class="accordion">
  <details class="accordion-item" open>
    <summary class="accordion-header">
      <span class="accordion-title">What is UX?</span>
      <svg class="accordion-chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </summary>
    <div class="accordion-body">
      UX is a zero-dependency, framework-agnostic CSS component library with iOS-style design.
    </div>
  </details>
  <details class="accordion-item">
    <summary class="accordion-header">
      <span class="accordion-title">How do I install it?</span>
      <svg class="accordion-chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </summary>
    <div class="accordion-body">
      Just add the CSS file to your project. No build step required.
    </div>
  </details>
  <details class="accordion-item">
    <summary class="accordion-header">
      <span class="accordion-title">Does it work with React?</span>
      <svg class="accordion-chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </summary>
    <div class="accordion-body">
      Yes! It works with any framework — React, Vue, HTMX, or vanilla HTML.
    </div>
  </details>
</div>

Requires: ux.min.css

<div class="flex flex-col w-full rounded-2xl overflow-hidden bg-base-100">
  <details class="border-b border-base-300" open>
    <summary class="flex items-center w-full min-h-11 px-4 py-3 cursor-pointer list-none hover:bg-base-200">
      <span class="flex-1 font-medium text-sm">What is UX?</span>
      <svg class="size-5 ml-3 opacity-30 transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </summary>
    <div class="px-4 pb-4 text-sm text-base-content/70 leading-relaxed">
      UX is a zero-dependency, framework-agnostic CSS component library.
    </div>
  </details>
  <details class="border-b border-base-300">
    <summary class="flex items-center w-full min-h-11 px-4 py-3 cursor-pointer list-none hover:bg-base-200">
      <span class="flex-1 font-medium text-sm">How do I install it?</span>
      <svg class="size-5 ml-3 opacity-30" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </summary>
    <div class="px-4 pb-4 text-sm text-base-content/70 leading-relaxed">
      Just add the CSS file to your project.
    </div>
  </details>
</div>

Requires: tw.min.css

// No JavaScript required!
// Uses native <details> element for expand/collapse.
// The chevron rotates via CSS: details[open] > summary .chevron { rotate }

Exclusive (one open at a time)

Section One

Only one section open at a time. Click another to close this one.

Section Two

This section automatically closes the previous one.

Section Three

Native HTML exclusive behavior — no JavaScript needed.

<!-- Use the same name="" attribute on all <details> for exclusive mode -->
<div class="accordion">
  <details class="accordion-item" name="faq" open>
    <summary class="accordion-header">
      <span class="accordion-title">Section One</span>
      <svg class="accordion-chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </summary>
    <div class="accordion-body">Only one section open at a time. Click another to close this one.</div>
  </details>
  <details class="accordion-item" name="faq">
    <summary class="accordion-header">
      <span class="accordion-title">Section Two</span>
      <svg class="accordion-chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </summary>
    <div class="accordion-body">This section automatically closes the previous one.</div>
  </details>
  <details class="accordion-item" name="faq">
    <summary class="accordion-header">
      <span class="accordion-title">Section Three</span>
      <svg class="accordion-chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </summary>
    <div class="accordion-body">Native HTML exclusive behavior — no JavaScript needed.</div>
  </details>
</div>

Requires: ux.min.css

<!-- The name="" attribute on <details> makes them exclusive (one open at a time) -->
<div class="flex flex-col w-full rounded-2xl overflow-hidden bg-base-100">
  <details class="border-b border-base-300" name="faq-tw" open>
    <summary class="flex items-center w-full min-h-11 px-4 py-3 cursor-pointer list-none hover:bg-base-200">
      <span class="flex-1 font-medium text-sm">Section One</span>
    </summary>
    <div class="px-4 pb-4 text-sm text-base-content/70">Only one open at a time.</div>
  </details>
  <details class="border-b border-base-300" name="faq-tw">
    <summary class="flex items-center w-full min-h-11 px-4 py-3 cursor-pointer list-none hover:bg-base-200">
      <span class="flex-1 font-medium text-sm">Section Two</span>
    </summary>
    <div class="px-4 pb-4 text-sm text-base-content/70">Closes the previous one.</div>
  </details>
</div>

Requires: tw.min.css

// No JavaScript required!
// The name="" attribute on <details> elements makes them mutually exclusive.
// All <details> with the same name will auto-close when another opens.

Arrow (CSS-only, no SVG needed)

Account Settings

Manage your account preferences and profile information.

Privacy & Security

Configure privacy settings and two-factor authentication.

Notifications

Choose which notifications you want to receive.

<div class="accordion accordion-arrow">
  <details class="accordion-item" name="arrow-demo" open>
    <summary class="accordion-header">
      <span class="accordion-title">Account Settings</span>
    </summary>
    <div class="accordion-body">Manage your account preferences and profile information.</div>
  </details>
  <details class="accordion-item" name="arrow-demo">
    <summary class="accordion-header">
      <span class="accordion-title">Privacy & Security</span>
    </summary>
    <div class="accordion-body">Configure privacy settings and two-factor authentication.</div>
  </details>
  <details class="accordion-item" name="arrow-demo">
    <summary class="accordion-header">
      <span class="accordion-title">Notifications</span>
    </summary>
    <div class="accordion-body">Choose which notifications you want to receive.</div>
  </details>
</div>

Requires: ux.min.css

<div class="flex flex-col w-full rounded-2xl overflow-hidden bg-base-100">
  <details class="border-b border-base-300" name="arrow-tw" open>
    <summary class="flex items-center w-full min-h-11 px-4 pr-10 py-3 cursor-pointer list-none relative hover:bg-base-200 [&::-webkit-details-marker]:hidden">
      <span class="flex-1 font-medium text-[0.9375rem]">Account Settings</span>
      <span class="absolute right-4 size-2 border-r-2 border-b-2 border-current opacity-30 rotate-45 transition-transform [[open]>&]:[-rotate-135deg]"></span>
    </summary>
    <div class="px-4 pb-4 text-sm text-base-content/70 leading-relaxed">Manage your account preferences and profile information.</div>
  </details>
  <details class="border-b border-base-300" name="arrow-tw">
    <summary class="flex items-center w-full min-h-11 px-4 pr-10 py-3 cursor-pointer list-none relative hover:bg-base-200 [&::-webkit-details-marker]:hidden">
      <span class="flex-1 font-medium text-[0.9375rem]">Privacy & Security</span>
      <span class="absolute right-4 size-2 border-r-2 border-b-2 border-current opacity-30 rotate-45 transition-transform [[open]>&]:[-rotate-135deg]"></span>
    </summary>
    <div class="px-4 pb-4 text-sm text-base-content/70 leading-relaxed">Configure privacy settings and two-factor authentication.</div>
  </details>
  <details name="arrow-tw">
    <summary class="flex items-center w-full min-h-11 px-4 pr-10 py-3 cursor-pointer list-none relative hover:bg-base-200 [&::-webkit-details-marker]:hidden">
      <span class="flex-1 font-medium text-[0.9375rem]">Notifications</span>
      <span class="absolute right-4 size-2 border-r-2 border-b-2 border-current opacity-30 rotate-45 transition-transform [[open]>&]:[-rotate-135deg]"></span>
    </summary>
    <div class="px-4 pb-4 text-sm text-base-content/70 leading-relaxed">Choose which notifications you want to receive.</div>
  </details>
</div>

Requires: tw.min.css

// No JavaScript required — arrow rotates via CSS

Plus/Minus (CSS-only, no SVG needed)

What payment methods do you accept?

We accept all major credit cards, PayPal, and bank transfers.

How long does shipping take?

Standard shipping takes 3-5 business days. Express is 1-2 days.

Can I return my order?

Yes, you have 30 days to return any unused item for a full refund.

<div class="accordion accordion-plus">
  <details class="accordion-item" name="plus-demo" open>
    <summary class="accordion-header">
      <span class="accordion-title">What payment methods do you accept?</span>
    </summary>
    <div class="accordion-body">We accept all major credit cards, PayPal, and bank transfers.</div>
  </details>
  <details class="accordion-item" name="plus-demo">
    <summary class="accordion-header">
      <span class="accordion-title">How long does shipping take?</span>
    </summary>
    <div class="accordion-body">Standard shipping takes 3-5 business days. Express is 1-2 days.</div>
  </details>
  <details class="accordion-item" name="plus-demo">
    <summary class="accordion-header">
      <span class="accordion-title">Can I return my order?</span>
    </summary>
    <div class="accordion-body">Yes, you have 30 days to return any unused item for a full refund.</div>
  </details>
</div>

Requires: ux.min.css

<div class="flex flex-col w-full rounded-2xl overflow-hidden bg-base-100">
  <details class="border-b border-base-300" name="plus-tw" open>
    <summary class="flex items-center w-full min-h-11 px-4 pr-10 py-3 cursor-pointer list-none relative hover:bg-base-200 [&::-webkit-details-marker]:hidden">
      <span class="flex-1 font-medium text-[0.9375rem]">What payment methods do you accept?</span>
      <span class="absolute right-4 flex items-center justify-center text-xl w-5 h-5 opacity-30 [[open]>&]:hidden">+</span>
      <span class="absolute right-4 flex items-center justify-center text-xl w-5 h-5 opacity-30 hidden [[open]>&]:flex">&minus;</span>
    </summary>
    <div class="px-4 pb-4 text-sm text-base-content/70 leading-relaxed">We accept all major credit cards, PayPal, and bank transfers.</div>
  </details>
  <details class="border-b border-base-300" name="plus-tw">
    <summary class="flex items-center w-full min-h-11 px-4 pr-10 py-3 cursor-pointer list-none relative hover:bg-base-200 [&::-webkit-details-marker]:hidden">
      <span class="flex-1 font-medium text-[0.9375rem]">How long does shipping take?</span>
      <span class="absolute right-4 flex items-center justify-center text-xl w-5 h-5 opacity-30 [[open]>&]:hidden">+</span>
      <span class="absolute right-4 flex items-center justify-center text-xl w-5 h-5 opacity-30 hidden [[open]>&]:flex">&minus;</span>
    </summary>
    <div class="px-4 pb-4 text-sm text-base-content/70 leading-relaxed">Standard shipping takes 3-5 business days. Express is 1-2 days.</div>
  </details>
  <details name="plus-tw">
    <summary class="flex items-center w-full min-h-11 px-4 pr-10 py-3 cursor-pointer list-none relative hover:bg-base-200 [&::-webkit-details-marker]:hidden">
      <span class="flex-1 font-medium text-[0.9375rem]">Can I return my order?</span>
      <span class="absolute right-4 flex items-center justify-center text-xl w-5 h-5 opacity-30 [[open]>&]:hidden">+</span>
      <span class="absolute right-4 flex items-center justify-center text-xl w-5 h-5 opacity-30 hidden [[open]>&]:flex">&minus;</span>
    </summary>
    <div class="px-4 pb-4 text-sm text-base-content/70 leading-relaxed">Yes, you have 30 days to return any unused item for a full refund.</div>
  </details>
</div>

Requires: tw.min.css

// No JavaScript required — plus changes to minus via CSS content property

Outline Variant

Section One

Content for section one.

Section Two

Content for section two.

<div class="accordion accordion-outline accordion-arrow">
  <details class="accordion-item" name="outline-demo">
    <summary class="accordion-header">
      <span class="accordion-title">Section One</span>
    </summary>
    <div class="accordion-body">Content for section one.</div>
  </details>
  <details class="accordion-item" name="outline-demo">
    <summary class="accordion-header">
      <span class="accordion-title">Section Two</span>
    </summary>
    <div class="accordion-body">Content for section two.</div>
  </details>
</div>

Requires: ux.min.css

<div class="flex flex-col w-full rounded-2xl overflow-hidden border border-base-300 bg-transparent">
  <details class="border-b border-base-300" name="outline-tw">
    <summary class="flex items-center w-full min-h-11 px-4 pr-10 py-3 cursor-pointer list-none relative hover:bg-base-200 [&::-webkit-details-marker]:hidden">
      <span class="flex-1 font-medium text-[0.9375rem]">Section One</span>
      <span class="absolute right-4 size-2 border-r-2 border-b-2 border-current opacity-30 rotate-45 transition-transform [[open]>&]:[-rotate-135deg]"></span>
    </summary>
    <div class="px-4 pb-4 text-sm text-base-content/70 leading-relaxed">Content for section one.</div>
  </details>
  <details name="outline-tw">
    <summary class="flex items-center w-full min-h-11 px-4 pr-10 py-3 cursor-pointer list-none relative hover:bg-base-200 [&::-webkit-details-marker]:hidden">
      <span class="flex-1 font-medium text-[0.9375rem]">Section Two</span>
      <span class="absolute right-4 size-2 border-r-2 border-b-2 border-current opacity-30 rotate-45 transition-transform [[open]>&]:[-rotate-135deg]"></span>
    </summary>
    <div class="px-4 pb-4 text-sm text-base-content/70 leading-relaxed">Content for section two.</div>
  </details>
</div>

Requires: tw.min.css

// No JavaScript required

Flat (Separated)

Account Settings

Manage your account preferences and profile information.

Privacy & Security

Configure privacy settings and two-factor authentication.

<div class="accordion accordion-flat accordion-arrow">
  <details class="accordion-item" name="flat-demo" open>
    <summary class="accordion-header">
      <span class="accordion-title">Account Settings</span>
    </summary>
    <div class="accordion-body">Manage your account preferences and profile information.</div>
  </details>
  <details class="accordion-item" name="flat-demo">
    <summary class="accordion-header">
      <span class="accordion-title">Privacy & Security</span>
    </summary>
    <div class="accordion-body">Configure privacy settings and two-factor authentication.</div>
  </details>
</div>

Requires: ux.min.css

<div class="flex flex-col w-full bg-transparent">
  <details class="mb-2 rounded-xl overflow-hidden bg-base-100" name="flat-tw" open>
    <summary class="flex items-center w-full min-h-11 px-4 pr-10 py-3 cursor-pointer list-none relative hover:bg-base-200 [&::-webkit-details-marker]:hidden">
      <span class="flex-1 font-medium text-[0.9375rem]">Account Settings</span>
      <span class="absolute right-4 size-2 border-r-2 border-b-2 border-current opacity-30 rotate-45 transition-transform [[open]>&]:[-rotate-135deg]"></span>
    </summary>
    <div class="px-4 pb-4 text-sm text-base-content/70 leading-relaxed">Manage your account preferences and profile information.</div>
  </details>
  <details class="mb-2 rounded-xl overflow-hidden bg-base-100" name="flat-tw">
    <summary class="flex items-center w-full min-h-11 px-4 pr-10 py-3 cursor-pointer list-none relative hover:bg-base-200 [&::-webkit-details-marker]:hidden">
      <span class="flex-1 font-medium text-[0.9375rem]">Privacy & Security</span>
      <span class="absolute right-4 size-2 border-r-2 border-b-2 border-current opacity-30 rotate-45 transition-transform [[open]>&]:[-rotate-135deg]"></span>
    </summary>
    <div class="px-4 pb-4 text-sm text-base-content/70 leading-relaxed">Configure privacy settings and two-factor authentication.</div>
  </details>
</div>

Requires: tw.min.css

// No JavaScript required

Classes Reference

Class	Description
.accordion	Container
.accordion-item	Item (use on <details>)
.accordion-header	Click target (use on <summary>)
.accordion-title	Title text
.accordion-subtitle	Subtitle text
.accordion-chevron	Chevron icon (auto-rotates on open)
.accordion-icon	Leading icon
.accordion-body	Collapsible content
.accordion-arrow	CSS-only arrow indicator (no SVG needed)
.accordion-plus	CSS-only +/− indicator (no SVG needed)
.accordion-outline	Bordered variant
.accordion-flat	Separated items
.accordion-inset	iOS grouped margin
.accordion-sm	Small size
.accordion-lg	Large size
name="..."	Add same name to <details> for exclusive mode (one open at a time)