Accordion

Display content with collapse behavior

Usage

Basic Usage

Item 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Item 2

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Item 3

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

preview

<template>
  <p-accordion>
    <p-accordion-item title="Item 1">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 2">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 3">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
  </p-accordion>
</template>

Multiple Open Item

Item 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Item 2

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Item 3

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

preview

<template>
  <p-accordion :multiple="true">
    <p-accordion-item title="Item 1">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 2">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 3">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
  </p-accordion>
</template>

Disabled Item

Item 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Item 2

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Item 3

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

preview

<template>
  <p-accordion>
    <p-accordion-item title="Item 1">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 2" disabled>
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 3">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
  </p-accordion>
</template>

With Defined Items

Item Title 1

Content Item 1

Item Title 2

Content Item 2

Item Title 3

Content Item 3

Item Title 4

Content Item 4

preview

<template>
  <p-accordion :items="items" />
</template>

<script setup>
import { defineAccordion } from '@privyid/persona/core'

const items = defineAccordion([
  {
    title  : 'Item Title 1',
    content: 'Content Item 1',
  },
  {
    title  : 'Item Title 2',
    content: 'Content Item 2',
  },
  {
    title   : 'Item Title 3',
    content : 'Content Item 3',
    disabled: true,
  },
  {
    title  : 'Item Title 4',
    content: 'Content Item 4',
  },
])
</script>

Variant

Pill Mode

Item 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Item 2

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Item 3

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

preview

<template>
  <p-accordion pill>
    <p-accordion-item title="Item 1">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 2">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 3">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
  </p-accordion>
</template>

Flush Mode

Item 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Item 2

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Item 3

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

preview

<template>
  <p-accordion flush>
    <p-accordion-item title="Item 1">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 2">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 3">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
  </p-accordion>
</template>

Hide Caret

Add props no-caret to hide caret icon. Add on p-accordion to hide globally, or add on p-accordion-item to hide spesific item.

Item 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Item 2

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

preview

<template>
  <p-accordion no-caret>
    <p-accordion-item title="Item 1">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 2">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
  </p-accordion>
</template>

Single Accordion Item

Item 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

preview

<template>
  <p-accordion-item title="Item 1">
    <div class="p-4">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    </div>
  </p-accordion-item>
</template>

Custom Caret

Item 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

preview

<template>
  <p-accordion-item title="Item 1">
    <template #caret="{ expanded }">
      <CaretUp v-if="expanded" />
      <CaretDown v-else />
    </template>
    <div class="p-4">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    </div>
  </p-accordion-item>
</template>

Binding v-model

v-model on p-accordion

Item 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Item 2

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

preview

Active :

<template>
  <p-accordion v-model="active">
    <p-accordion-item title="Item 1">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
    <p-accordion-item title="Item 2">
      <div class="p-4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </p-accordion-item>
  </p-accordion>
</template>

<script setup>
const active = ref('')
</script>

v-model on p-accordion-item

Item 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

preview

Expanded :

false

<template>
  <p-accordion-item
    v-model="expanded"
    title="Item 1">
    <div class="p-4">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    </div>
  </p-accordion-item>
</template>
<script setup>
const expanded = ref(false)
</script>

API

Props <p-accordion>

Props	Type	Default	Description
flush	Boolean	false	Enable flush, accordion without container-border
pill	Boolean	false	Enable pill, accordion with space on each accordion item
multiple	Boolean	false	Allow expand multiple accordion item
no-caret	Boolean	false	Hide caret icon
items	Array	-	Accordion items
v-model	String	-	ID of current expanded accordion item

Slots <p-accordion>

Name	Description
default	Accordion content

Props <p-accordion-item>

Props	Type	Default	Description
title	String	-	Accordion Item Header Title
disabled	Boolean	false	Disable state of accordion item
no-caret	Boolean	false	Hide caret icon
v-model	Boolean	false	v-model value for expand or collapse the accordion item

Slots <p-accordion-item>

Name	Description
default	Accordion item content
activator	Content to replace Item Activator
caret	Content to replace Caret Icon

Events <p-accordion-item>

Name	Arguments	Description
expand	-	Event when accordion item expanded
collapse	-	Event when accordion item collapsed