Collapsible

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

Source code

Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

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>