Headless Accordion #

The Headless Accordion h-accordion component is useful in for reducing vertical space on the screen. This component has 2 child components.

Usage #

We need to import all 3 components h-accordion, h-accordion-content and lastly h-accordion-toggle

Minimal example:

<script setup lang="ts">
import {
  HAccordion,
  HAccordionContent,
  HAccordionToggle,
} from "@/modules/headless-accordion";
const isOpen = ref(false);
</script>

<template>
  <h-accordion v-model="isOpen">
    <h-accordion-toggle> Open Accordion </h-accordion-toggle>
    <h-accordion-content>
      <div v-for="x in 50" :key="x">Item {{ x }}</div>
    </h-accordion-content>
  </h-accordion>
</template>

h-accordion #

Directives #

v-model (optional) #

This components supports the v-model directive for 2 way data binding. The directive can be used to change the state of the accordion.

modelValue = {
  type: Boolean,
  default: undefined,
};

Props #

id (optional) #

For accessibility purposes the accordion components need to have an id attribute. This attribute is auto-generated by default but we can pass a custom id if necessary.

The id will be passed down to the child components automatically.

id = {
  type: String,
  default: undefined,
};

open-by-default #

While the accordion supports a v-model directive if that is not present the accordion will use it's internal state to open and close. Use open-by-default in case you want the accordion to be open upon mounting.

openByDefault = {
  type: Boolean,
  default: false,
};

h-accordion-toggle #

This component is used to toggle the accordion on or off. This component renders a button element by default.

Props #

html-tag (optional) #

This is useful if you want to use a custom tag for the component other than a button.

htmlTag = {
  type: String,
  default: "button",
};

h-accordion-content #

All the content form the accordion should sit within this component. This component renders a div element by default.

Props #

html-tag (optional) #

This is useful if you want to use a custom tag for the component other than a div.

htmlTag = {
  type: String,
  default: "button",
};