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>

Icon

How to create an account?

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm

How to create an account?

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm

preview

<template>  <p-accordion-item  title="How to create an account?"  titleClass="items-center space-x-2"  icon="https://domain.com/assets/images/privy.png"  iconClass="max-w-20">  <div class="p-4">  A wonderful serenity has taken possession of my entire soul,  like these sweet mornings of spring which I enjoy with my  whole heart. I am alone, and feel the charm  </div>  </p-accordion-item>   <p-accordion-item  title="How to create an account?"  titleClass="items-center space-x-2"  :icon="icon">  <div class="p-4">  A wonderful serenity has taken possession of my entire soul,  like these sweet mornings of spring which I enjoy with  my whole heart. I am alone, and feel the charm  </div>  </p-accordion-item> </template>  <script setup lang="ts"> import iconPrivy from '@privyid/persona-icon/vue/privy-alt/24.vue' import { markRaw } from 'vue'  const icon = markRaw(iconPrivy) </script>

Custom Title

Accordion title can be Customized by using slot title.

Have a full digital identity experience

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm

preview

<template>  <p-accordion-item  titleClass="items-center"  style="--p-accordion-expanded-activator-bg: transparent;  --p-accordion-expanded-activator-bg-dark: transparent;">  <template #title>  <img src="/assets/images/icon-personal-plan-access.svg" class="inline-block w-10 h-auto mr-4" />  <strong>Have a full digital identity experience</strong>  </template>  <div class="p-4">  But I must explain to you how all this mistaken idea of  denouncing pleasure and praising pain was born  </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>

Variables

Accordion use local CSS variables on .accordion and .accordion__item for enhanced real-time customization.

.accordion

--p-accordion-border: theme(borderColor.default.DEFAULT); --p-accordion-border-dark: theme(borderColor.dark.default.DEFAULT); --p-accordion-item-border: theme(borderColor.default.DEFAULT); --p-accordion-item-border-dark: theme(borderColor.dark.default.DEFAULT); --p-accordion-divide: theme(divideColor.default.DEFAULT); --p-accordion-divide-dark: theme(divideColor.dark.default.DEFAULT);

.accordion__item

--p-accordion-bg: theme(backgroundColor.default.DEFAULT); --p-accordion-bg-dark: theme(backgroundColor.dark.default.DEFAULT); --p-accordion-collapsed-border: theme(borderColor.default.DEFAULT); --p-accordion-collapsed-border-dark: theme(borderColor.dark.default.DEFAULT); --p-accordion-expanded-border: theme(borderColor.default.DEFAULT); --p-accordion-expanded-border-dark: theme(borderColor.dark.default.DEFAULT); --p-accordion-expanded-activator-bg: theme(backgroundColor.default.alpha); --p-accordion-expanded-activator-bg-dark: theme(backgroundColor.dark.default.alpha); --p-accordion-expanded-activator-color: theme(textColor.default); --p-accordion-expanded-activator-color-dark: theme(textColor.dark.default);

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
icon	String, Component	-	v-model value for expand or collapse the accordion item
titleClass	String or Array or Object	-	Additional class for accordion item title
contentClass	String or Array or Object	-	Additional class for accordion item content
iconClass	String or Array or Object	-	Additional class for accordion item content

Slots <p-accordion-item>

Name	Description
default	Accordion item content
activator	Content to replace Item Activator
default	Content to replace Item Title
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