DisplayAccordion

Panels that open and close, built on native details elements. With a single item open at a time the browser does the exclusivity (details name), and hidden until-found lets the browser search inside closed panels. The open item can live in the URL.

import { DisplayAccordion } from '@zairakai/vue-components/Display'

Usage

<DisplayAccordion />

Example

What is it?

Panels built on native details elements.

Is it accessible?

Arrow keys move between the headers.

<template>
  <DisplayAccordion>
    <DisplayAccordionItem
      id="one"
      title="What is it?"
      >Panels built on native details elements.</DisplayAccordionItem
    >
    <DisplayAccordionItem
      id="two"
      title="Is it accessible?"
      >Arrow keys move between the headers.</DisplayAccordionItem
    >
  </DisplayAccordion>
</template>

Props

Name	Type	Default	Description
id	string
class	string
modelValue	string|array	undefined	The open item: its id in single mode, an array of ids in multiple mode.
multiple	boolean	false
queryParam	string		Keep the open item in this query parameter of the URL (?faq=shipping, or ?faq=a,b when multiple).

Events

Name	Description
update:modelValue

Slots

Name	Description
default

See Theming for the class hooks and the data-* state of the components.