Accordion

Used to display an accordion with a content slot, an icon and a title.

Basic usage

What is this info about?

template

<Accordion title="What is this info about?">
  <div v-for="item in list" :key="item.label" class="tw-mb-6 [&:last-child]:tw-mb-0">
    <IconLabel :icon="item.icon" color="ice-900" class="tw-mb-1.5">
      <span class="tw-text-ice-900">
        {{ item.label }}
      </span>
    </IconLabel>
    <span class="tw-text-ice-700">
      {{ item.text }}
    </span>
  </div>
</Accordion>

Changing the icon

What is this info about?

template

<Accordion title="What is this info about?" icon="gear">
  <p class="tw-mb-0"> Simple text </p>
</Accordion>

Slots

Accordion offers a header slot for more flexibility as an alternative to the title and icon props. When the slot is being used, the title and icon props will not render.

Either the header slot or the title is required for this component

This is a customized header

With multiple lines

template

<Accordion>
  <template #header>
    <h3 class="tw-font-bold">This is a customized header</h3>
    <h5>With multiple lines</h5>
  </template>
  <p class="tw-mb-0"> Simple text </p>
</Accordion>

Multiple Accordions with one control

Accordion offers the possibility to control the open state by the parent, using the prop isExpanded and also the @toggle event. This my be useful when we have multiple accordions the need to make just one expanded at a time.

Accordion 1

Simple text

Accordion 2

const accordionStates = ref({
  firstAccordion: true,
  secondAccordion: false,
})

function onAccordionOpen(accordionName: string) {
  for(let category in accordionStates.value) {
     accordionStates.value[category] = accordionName === category
  }
}

template

 <AccordionGroup>
  <Accordion
    title="Accordion 1"
    :is-expanded="accordionStates['firstAccordion']"
    id="accordion-1"
    @open="onAccordionOpen('firstAccordion')"
  >
    <p class="tw-mb-0"> Simple text </p>
  </Accordion>
  <Accordion
    title="Accordion 2"
    :is-expanded="accordionStates['secondAccordion']"
    id="accordion-2"
    @open="onAccordionOpen('secondAccordion')"
  >
    <p class="tw-mb-0"> Simple text </p>
  </Accordion>
</AccordionGroup>

API

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.

<Accordion />

Accordion ​

Basic usage ​

Changing the icon ​

Slots ​

This is a customized header

Multiple Accordions with one control ​

API ​

Accordion

Basic usage

Changing the icon

Slots

Multiple Accordions with one control

API