Accordion

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Usage

Import all parts and piece them together. It's mandatory to wrap the whole component with the Tailwind tag.

const { Tailwind } = VM.require("uiisnear.near/widget/tailwind")
const { Accordion, AccordionItem, AccordionTrigger, AccordionContent } =
  VM.require("uiisnear.near/widget/accordion")
 
if (Tailwind == undefined) return ""
<Tailwind>
  <Accordion type="single" collapsible>
    <AccordionItem value="item-1">
      <AccordionTrigger>Is it accessible?</AccordionTrigger>
      <AccordionContent>
        Yes. It adheres to the WAI-ARIA design pattern.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</Tailwind>

API Reference

Accordion

Contains all the parts of an accordion.

PropTypeDefault
type
enum
---
value
string
---
defaultValue
string
---
onValueChange
function
---
value
string
[]
defaultValue
string
[]
onValueChange
function
---
collapsible
boolean
false
disabled
boolean
false
dir
enum
"ltr"
orientation
enum
"vertical"
Data attributeValues
[data-orientation]"vertical" | "horizontal"

AccordionItem

Contains all the parts of a collapsible section.

PropTypeDefault
disabled
boolean
false
value*
string
---

AccordionTrigger

Toggles the collapsed state of its associated item.

Data attributeValues
[data-state]"open" | "closed"
[data-disabled]Present when disabled
[data-orientation]"vertical" | "horizontal"

AccordionContent

Contains the collapsible content for an item.

PropTypeDefault
forceMount
boolean
---
Data attributeValues
[data-state]"open" | "closed"
[data-disabled]Present when disabled
[data-orientation]"vertical" | "horizontal"

Classnames

Classnames available to customize the component.

FunctionClassname
AccordionItemaccordionItemClassname
AccordionTriggeraccordionTriggerClassname
AccordionContentaccordionContentClassname

Examples

Expanded by default

Use the defaultValue prop to define the open item by default.

Yes. It comes with default styles that matches the other components&apos; aesthetic.

Allow collapsing all items

Use the collapsible prop to allow all items to close.

Multiple items open at the same time

Set the type prop to multiple to enable opening multiple items at once.

ThemingAlert