Collapsible ​

The Collapsible component is based on Headless UI and allows you to toggle the visibility of content within your Vue app. It can be used to hide or reveal information in a compact and organized manner.

Usage ​

Basic Usage ​

You can use the VCollapsible component in your template like so:

The isOpen variable in the v-model directive controls whether the collapsible is open or closed.

Expanded List Example ​

Hide Icon ​

To hide the icon that indicates whether the collapsible is open or closed, set the hideIcon prop to true:

Props ​

Events ​

None

Slots ​

• Default

CSS Variables ​

None

Standalone Installation ​

You can also install the Collapsible component individually via @morpheme/collapsible package:

npm i @morpheme/collapsible

npm i @morpheme/collapsible

<script setup lang="ts">
import { VCollapse } from "@morpheme/collapsible";

const isOpen = ref(false);
</script>

<template>
  <VBtn @click="isOpen = !isOpen"> Toggle </VBtn>
  <VCollapse :show="isOpen"> Hello World </VCollapse>
</template>

<script setup lang="ts">
import { VCollapse } from "@morpheme/collapsible";

const isOpen = ref(false);
</script>

<template>
  <VBtn @click="isOpen = !isOpen"> Toggle </VBtn>
  <VCollapse :show="isOpen"> Hello World </VCollapse>
</template>

Storybook ​

View Storybook documentation here.