Accordion

Collapsibles, one open at a time

A set of Collapsibles where opening one closes the others — an FAQ, a settings list. Use it when only one answer matters at a time; if people compare several, let them stay open (type="multiple").

Basic

When does it air?

Thursdays at 24:00, then streaming the next morning.

Where is the soundtrack?

On the official store and every major service from the release date.

Is there a second season?

Yes — announced at the end of the first.

<script setup lang="ts">
import { BlessAccordion, BlessAccordionItem } from "blessing-ui";
</script>

<template>
  <BlessAccordion style="max-width: 480px">
    <BlessAccordionItem title="When does it air?">
      Thursdays at 24:00, then streaming the next morning.
    </BlessAccordionItem>
    <BlessAccordionItem title="Where is the soundtrack?">
      On the official store and every major service from the release date.
    </BlessAccordionItem>
    <BlessAccordionItem title="Is there a second season?">
      Yes — announced at the end of the first.
    </BlessAccordionItem>
  </BlessAccordion>
</template>

• Built on native <details name>, so the browser closes the others and find-in-page opens a match. Enter or Space toggles an item.
• Each BlessAccordionItem takes a title (or #title), v-model:open and disabled.

Usage

import { BlessAccordion, BlessAccordionItem } from "blessing-ui";

API

BlessAccordion

Props

Name	Type	Default	Description
type	"single" | "multiple"	"single"

Slots

Name	Scope	Description
default	—

BlessAccordionItem

Props

Name	Type	Default	Description
title	string	—
disabled	boolean	—
open	boolean	false

Events

Name	Payload	Description
update:open	[value: boolean]

Slots

Name	Scope	Description
title	—
default	—