Controls · 16 Props

Accordion

Expandable panel group with single or multiple open mode. Each item has a title and a `blocks` array rendered via RenderBlocks (use the `html` block inside `blocks` for raw HTML).

Controls 16 Props

src/components/blocks/Accordion.astro

← Alle Components

Props

Prop	Type	Default	Beschreibung
buttonClass	string	—
card	any	{}
class	string	—
contentClass	string	text-sm text-base-content/70
contentWrapClass	string	—
defaultOpenIndex	number	-1
icon	string	—
iconClass	string	h-5 w-5 transition-transform duration-200 ease-out
iconWrapClass	string	—
id	string	—
items	object[]	[]
items[].blocks	any	—	Nested blocks rendered inside the panel via RenderBlocks. Use `html` block for raw HTML.
items[].buttonClass	string	—
items[].icon	string	—
items[].iconClass	string	—
items[].title *	any	—	Title: string or { text, class }
items[].titleClass	string	—	@deprecated Use title: { class } instead
mode	string	single	"single" \| "multiple"
padClass	string	p-5
panelClass	string	overflow-hidden will-change-[height]
titleClass	string	—
variant	string	card	"card" \| "minimal"

Beispiele

Single Mode

Only one item open at a time.

Astro is a modern web framework for building fast, content-focused websites.

Alpine.js is a minimal framework for composing JavaScript behavior in your markup.

Tailwind CSS is a utility-first CSS framework for rapid UI development.

{
  "type": "accordion",
  "props": {
    "mode": "single",
    "items": [
      {
        "title": "What is Astro?",
        "blocks": [
          {
            "type": "text",
            "props": {
              "text": "Astro is a modern web framework for building fast, content-focused websites."
            }
          }
        ]
      },
      {
        "title": "What is Alpine.js?",
        "blocks": [
          {
            "type": "text",
            "props": {
              "text": "Alpine.js is a minimal framework for composing JavaScript behavior in your markup."
            }
          }
        ]
      },
      {
        "title": "What is Tailwind?",
        "blocks": [
          {
            "type": "text",
            "props": {
              "text": "Tailwind CSS is a utility-first CSS framework for rapid UI development."
            }
          }
        ]
      }
    ]
  }
}

<Accordion mode="single" items={[{"title":"What is Astro?","blocks":[{"type":"text","props":{"text":"Astro is a modern web framework for building fast, content-focused websites."}}]},{"title":"What is Alpine.js?","blocks":[{"type":"text","props":{"text":"Alpine.js is a minimal framework for composing JavaScript behavior in your markup."}}]},{"title":"What is Tailwind?","blocks":[{"type":"text","props":{"text":"Tailwind CSS is a utility-first CSS framework for rapid UI development."}}]}]} />

Multiple Mode

Multiple items can be open simultaneously. First item open by default.

Astro 5, Tailwind 4, Alpine.js

Cloudflare Pages with Workers for edge logic.

Storyblok headless CMS with visual editor.

{
  "type": "accordion",
  "props": {
    "mode": "multiple",
    "defaultOpenIndex": 0,
    "items": [
      {
        "title": "Frontend Stack",
        "blocks": [
          {
            "type": "text",
            "props": {
              "text": "Astro 5, Tailwind 4, Alpine.js"
            }
          }
        ]
      },
      {
        "title": "Hosting",
        "blocks": [
          {
            "type": "text",
            "props": {
              "text": "Cloudflare Pages with Workers for edge logic."
            }
          }
        ]
      },
      {
        "title": "CMS",
        "blocks": [
          {
            "type": "text",
            "props": {
              "text": "Storyblok headless CMS with visual editor."
            }
          }
        ]
      }
    ]
  }
}

<Accordion
  mode="multiple"
  defaultOpenIndex={0}
  items={[{"title":"Frontend Stack","blocks":[{"type":"text","props":{"text":"Astro 5, Tailwind 4, Alpine.js"}}]},{"title":"Hosting","blocks":[{"type":"text","props":{"text":"Cloudflare Pages with Workers for edge logic."}}]},{"title":"CMS","blocks":[{"type":"text","props":{"text":"Storyblok headless CMS with visual editor."}}]}]}
/>