Collapsible

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JCollapsible } from '@juxtui/ui'

Usage #

<JCollapsible v-model="open" label="What’s included in the free plan?">
  <p>Unlimited projects, up to three team members, and community support.</p>
</JCollapsible>

A single disclosure primitive — for a group where opening one can close the others, use JAccordion instead.

Variants & examples #

Several, independently#

Each panel keeps its own v-model, so any number can be open at once.

<script setup lang="ts">
const faqs = [
  { q: 'Can I change plans later?', a: 'Yes, at any time. Upgrades apply immediately; downgrades apply at the next billing cycle.' },
  { q: 'Do you offer refunds?', a: 'Within 14 days of any charge, no questions asked.' },
  { q: 'Is there a free trial?', a: 'Every paid plan starts with a 14-day trial | no card required.' },
]
const open = ref(faqs.map(() => false))
</script>

<template>
  <div class="flex w-96 flex-col divide-y divide-border-subtle dark:divide-border">
    <div v-for="(faq, index) in faqs" :key="faq.q" class="py-3">
      <JCollapsible v-model="open[index]" :label="faq.q">
        <p>{{ faq.a }}</p>
      </JCollapsible>
    </div>
  </div>
</template>

Disabled#

<script setup lang="ts">
const open = ref(false)
</script>

<template>
  <JCollapsible v-model="open" label="Advanced settings (unavailable on your plan)" disabled class="w-80">
    <p>Upgrade to a Team plan to unlock advanced settings.</p>
  </JCollapsible>
</template>

API #

Props

Events

Slots

Accessibility #

• A native <button type="button"> with aria-expanded and aria-controls pointing at the panel.
• The panel is role="region", labelled by the trigger, and marked inert while closed — its contents are unreachable and unannounced.
• Panel height animates through CSS grid rows rather than a measured pixel value, and is skipped entirely under reduced motion.

Keyboard #