Collapsible

Hide and reveal content with a collapsible component featuring customizable icons and labels.

Overview

The ProseCollapsible component allows you to show and hide content with a clickable trigger. It's perfect for FAQ sections, progressive disclosure, hiding lengthy content, or creating expandable code examples.

Basic Usage

With Custom Text

Default Open

Start with the content expanded:

This content is visible by default. Users can collapse it if they want.

Custom Icons

Change the icons to match your design:

Common Use Cases

FAQ Section

Frequently Asked Questions

How do I install this library?

What are the system requirements?

Is it compatible with Nuxt 3?

Code Examples

Show additional code without overwhelming the page:

Long Content

Hide lengthy explanations until needed:

Progressive Disclosure

Reveal information step by step:

Tutorial: Building Your First Component

Step 1: Create the Component File

Create a new file MyButton.vue:

<template>
  <button>Click me</button>
</template>

Step 2: Add Props

Step 3: Add Emits

Spoiler Content

Hide spoilers or answers:

Quiz Question

What is the time complexity of accessing an element in a hash table?

Props

Prop	Type	Default	Description
`openTitle`	`string`	`"Show more"`	Text shown when content is hidden (trigger to open)
`closeTitle`	`string`	`"Show less"`	Text shown when content is visible (trigger to close)
`openIcon`	`string`	`"lucide:minus"`	Icon displayed when content is open
`closeIcon`	`string`	`"lucide:plus"`	Icon displayed when content is closed
`defaultOpen`	`boolean`	`false`	Whether content is expanded by default
`triggerClass`	`string`	-	Additional CSS classes for trigger button
`contentClass`	`string`	-	Additional CSS classes for content area

Icon Options

Popular icon combinations:

Open Icon	Close Icon	Use Case
`lucide:minus`	`lucide:plus`	Default, general purpose
`lucide:chevron-up`	`lucide:chevron-down`	Vertical expansion
`lucide:chevron-left`	`lucide:chevron-right`	Horizontal flow
`lucide:eye-off`	`lucide:eye`	Show/hide content
`lucide:lock-open`	`lucide:lock`	Reveal secrets/spoilers
`lucide:x`	`lucide:maximize-2`	Collapse/expand

Vue Component Usage

You can also use this component in your Vue files:

<template>
  <div>
    <!-- Basic usage -->
    <ProseCollapsible>
      <p>Hidden content goes here</p>
    </ProseCollapsible>

    <!-- With custom text -->
    <ProseCollapsible open-title="Show details" close-title="Hide details">
      <p>More detailed information</p>
    </ProseCollapsible>

    <!-- With custom icons -->
    <ProseCollapsible open-icon="lucide:chevron-up" close-icon="lucide:chevron-down">
      <p>Content with chevron icons</p>
    </ProseCollapsible>

    <!-- Default open -->
    <ProseCollapsible default-open>
      <p>This starts expanded</p>
    </ProseCollapsible>

    <!-- With custom classes -->
    <ProseCollapsible
      trigger-class="text-primary font-bold"
      content-class="bg-muted p-4 rounded-lg"
    >
      <p>Styled content</p>
    </ProseCollapsible>
  </div>
</template>

Nested Collapsibles

You can nest collapsibles for hierarchical content:

Styling

The component uses sensible defaults but can be customized:

<ProseCollapsible
  trigger-class="text-lg font-semibold text-primary hover:text-primary/80"
  content-class="mt-4 p-4 bg-muted/50 rounded-lg border"
>
  Custom styled content
</ProseCollapsible>