DocsComponentsAccordion

Accordion

Sections that expand one at a time.

Alpine.js2 files

<pb-ui.accordion value="q1" class="w-full max-w-md">
  <pb-ui.accordion-item value="q1" title="Is it accessible?">Yes. The components follow the WAI-ARIA guidelines.</pb-ui.accordion-item>
  <pb-ui.accordion-item value="q2" title="Is it styled?">Yes. With Tailwind CSS v4 and theme variables.</pb-ui.accordion-item>
  <pb-ui.accordion-item value="q3" title="Is it animated?">Yes, with Alpine.js transitions.</pb-ui.accordion-item>
</pb-ui.accordion>

Installation

pyblade-ui add accordion

Install the dependencies
Alpine.js, loaded in your <head>.

Copy these files into your project

components/ui/accordion.html

@props({'value': ''})
<div data-slot="accordion" x-data="{ open: '{{ value }}' }" {{ attributes.cn("w-full") }}>{{ slot }}</div>

components/ui/accordion_item.html

@props({'value': '', 'title': ''})
<div data-slot="accordion-item" x-bind:data-state="open === '{{ value }}' ? 'open' : 'closed'" {{ attributes.cn("border-b last:border-b-0") }}>
  <h3 class="flex">
    <button type="button" x-on:click="open = (open === '{{ value }}' ? '' : '{{ value }}')" x-bind:aria-expanded="open === '{{ value }}'"
      class="flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50">
      {{ title }}
      <svg x-bind:class="open === '{{ value }}' ? 'rotate-180' : ''" class="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
    </button>
  </h3>
  <div x-show="open === '{{ value }}'" x-cloak x-transition.opacity class="overflow-hidden pb-4 text-sm">{{ slot }}</div>
</div>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tags <pb-ui.accordion> <pb-ui.accordion-item> are available in all your templates.

<pb-ui.accordion value="q1">
  <pb-ui.accordion-item value="q1" title="Is it accessible?">Yes.</pb-ui.accordion-item>
</pb-ui.accordion>

Props

<pb-ui.accordion>

Prop	Default
value	''

<pb-ui.accordion-item>

Prop	Default
value	''
title	''

Any other attribute (class, id, x-on:click, hx-post…) is passed to the root element; your Tailwind classes win over the component's.

‹ Tabs Collapsible ›