Collapsible

<details> based

Content most readers can skip — an FAQ answer, advanced options, a long spec — behind a title that opens it. Several with the same name make an accordion where one is open at a time. Don't hide anything most people need.

Basic

Standalone collapsible

Native <details>; open = false

Disabled

hidden

<script setup lang="ts">
import { ref } from "vue";
import { BlessCollapsible } from "blessing-ui";
const open = ref(false);
</script>

<template>
  <div class="col">
    <BlessCollapsible v-model:open="open" title="Standalone collapsible"
      >Native &lt;details&gt;; open = {{ open }}</BlessCollapsible
    >
    <BlessCollapsible title="Disabled" disabled>hidden</BlessCollapsible>
  </div>
</template>

• Native <details>: Enter or Space toggles it, find-in-page opens it on a match, and it works before any script runs.
• v-model:open follows it both ways. name groups them (the browser closes the others).
• #title for a title with markup; disabled keeps it shut.

Usage

import { BlessCollapsible } from "blessing-ui";

API

Props

Name	Type	Default	Description
title	string	—
name	string	—	native exclusive-open group (details name=)
disabled	boolean	—
open	boolean	false

Events

Name	Payload	Description
update:open	[value: boolean]

Slots

Name	Scope	Description
title	—
default	—