jio-accordion

Props

Prop name	Description	Type	Values	Default
items	The data to display in the table, this is an array of objects	Array	-
collapseOne	Set collapseOne on true when the component must close other when click on a item. When this variable is false all item can open at the same time	boolean	-

View on Gitlab

General

This is the standard accordion component.

View design in Figma

Code examples

A simple accordion.

<template>
  <div class="jio-core">
    <jio-accordion :items="items" />
  </div>
</template>

<script setup lang="ts">
const items: AccordionItem[] = [
  {
    title: "Titel 1",
    description:
      "Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.",
  },
  {
    title: "Titel 2",
    description:
      "Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.",
  },
  {
    title: "Titel 3",
    description:
      "Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.",
  },
  {
    title: "Titel 4",
    description:
      "Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.Neque, lacus, libero id urna, sollicitudin in phasellus pellentesque ultricies.",
  },
];
</script>

jio-accordion ​

Props ​

General ​

Code examples ​

jio-accordion

Props

General

Code examples