Accordion

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

Yes. It adheres to the WAI-ARIA design pattern.

import type { PropsOf } from '@builder.io/qwik';
import { component$, useStyles$ } from '@builder.io/qwik';
import { Accordion } from 'qwik-primitives';
import styles from './styles.css?inline';

const ChevronLeftIcon = component$<PropsOf<'svg'>>((props) => {
  return (
    <svg
      aria-hidden="true"
      focusable="false"
      width="15"
      height="15"
      viewBox="0 0 15 15"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z"
        fill="currentColor"
        fill-rule="evenodd"
        clip-rule="evenodd"
      ></path>
    </svg>
  );
});

export const AccordionDemo = component$(() => {
  useStyles$(styles);

  return (
    <Accordion.Root type="single" defaultValue="item-1" class="accordion-root">
      <Accordion.Item value="item-1" class="accordion-root-item">
        <Accordion.ItemHeader class="accordion-item-header">
          <Accordion.ItemTrigger class="accordion-item-trigger">
            <span class="accordion-item-trigger-title">Is it accessible?</span>
            <Accordion.ItemIndicator class="accordion-item-trigger-indicator">
              <ChevronLeftIcon height={16} width={16} class="accordion-item-trigger-indicator" />
            </Accordion.ItemIndicator>
          </Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel class="accordion-item-panel">
          <Accordion.ItemContent>
            <div class="accordion-item-content-inner">
              <p class="accordion-item-content-text">Yes. It adheres to the WAI-ARIA design pattern.</p>
            </div>
          </Accordion.ItemContent>
        </Accordion.ItemPanel>
      </Accordion.Item>

      <Accordion.Item value="item-2" class="accordion-root-item">
        <Accordion.ItemHeader class="accordion-item-header">
          <Accordion.ItemTrigger class="accordion-item-trigger">
            <span class="accordion-item-trigger-title">Is it unstyled?</span>
            <Accordion.ItemIndicator class="accordion-item-trigger-indicator">
              <ChevronLeftIcon height={16} width={16} class="accordion-item-trigger-indicator" />
            </Accordion.ItemIndicator>
          </Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel class="accordion-item-panel">
          <Accordion.ItemContent>
            <div class="accordion-item-content-inner">
              <p class="accordion-item-content-text">
                Yes. It's unstyled by default, giving you freedom over the look and feel.
              </p>
            </div>
          </Accordion.ItemContent>
        </Accordion.ItemPanel>
      </Accordion.Item>

      <Accordion.Item value="item-3" class="accordion-root-item">
        <Accordion.ItemHeader class="accordion-item-header">
          <Accordion.ItemTrigger class="accordion-item-trigger">
            <span class="accordion-item-trigger-title">Can it be animated?</span>
            <Accordion.ItemIndicator class="accordion-item-trigger-indicator">
              <ChevronLeftIcon height={16} width={16} class="accordion-item-trigger-indicator" />
            </Accordion.ItemIndicator>
          </Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel class="accordion-item-panel">
          <Accordion.ItemContent>
            <div class="accordion-item-content-inner">
              <p class="accordion-item-content-text">Yes! You can animate the Accordion with CSS.</p>
            </div>
          </Accordion.ItemContent>
        </Accordion.ItemPanel>
      </Accordion.Item>
    </Accordion.Root>
  );
});

.accordion-root {
  width: 18.75rem;
  background-color: #ffffff;
  border: 1px solid #00073527;
  border-radius: 0.5rem;
}

.accordion-root-item {
  overflow: hidden;
  margin-top: 1px;
  box-shadow: 0 1px 0 #00073527;
}

.accordion-root-item:has(.accordion-item-trigger:focus-visible) {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 2px #b98bff;
}

.accordion-root-item:first-of-type {
  margin-top: 0;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.accordion-root-item:last-of-type {
  box-shadow: none;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.accordion-item-header {
  all: unset;
}

.accordion-item-trigger {
  all: unset;
  box-sizing: border-box;
  height: 2.75rem;
  width: 100%;
  padding: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: default;
  user-select: none;
  background-color: #ffffff;
  transition:
    background-color,
    filter 100ms ease;
}

.accordion-item-trigger:focus {
  outline: none;
}

.accordion-item-trigger:enabled:hover {
  background-color: #00005506;
}

.accordion-item-trigger:enabled:active {
  filter: brightness(0.92) saturate(1.1);
}

.accordion-item-trigger[data-state='open'] {
  box-shadow: inset 0 -1px #00073527;
}

.accordion-item-trigger-title {
  text-align: left;
  text-wrap: balance;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0em;
  color: #1e1f24;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.accordion-item-trigger-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0002119d;
}

.accordion-item-trigger-indicator[data-state='open'] > .accordion-item-trigger-indicator {
  transform-origin: center;
  transform: rotate(-90deg);
}

.accordion-item-trigger-indicator {
  transition: transform 350ms ease-in-out;
}

.accordion-item-panel[data-state='open'] {
  animation: accordion-down 350ms cubic-bezier(0, 0, 0.2, 1);
}

.accordion-item-panel[data-state='closed'] {
  animation: accordion-up 350ms cubic-bezier(0, 0, 0.2, 1);
}

.accordion-item-content-inner {
  padding-block: 1rem;
  padding-inline: 0.75rem;
  background-color: #00005506;
}

.accordion-item-content-text {
  all: unset;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0em;
  color: #0002119d;
}

@keyframes accordion-down {
  0% {
    opacity: 0;
    grid-template-rows: 0fr;
  }
  100% {
    opacity: 1;
    grid-template-rows: 1fr;
  }
}

@keyframes accordion-up {
  0% {
    opacity: 1;
    grid-template-rows: 1fr;
  }
  100% {
    opacity: 0;
    grid-template-rows: 0fr;
  }
}

Features

Full keyboard navigation.
Can expand one or multiple items.
Can be controlled or uncontrolled.
Adheres to the Accordion WAI-ARIA design pattern.

Import

import { Accordion } from 'qwik-primitives';

Anatomy

Import the component and piece the parts together.

import { component$ } from '@builder.io/qwik';
import { Accordion } from 'qwik-primitives';

export const AccordionDemo = component$(() => {
  return (
    <Accordion.Root>
      <Accordion.Item>
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>
            <Accordion.ItemIndicator />
          </Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel>
          <Accordion.ItemContent />
        </Accordion.ItemPanel>
      </Accordion.Item>
    </Accordion.Root>
  );
});

API Reference

Root

Contains all the parts of an accordion. This component is based on the div element.

Props

as

Description: Change the default rendered element for the one passed as, merging their props and behavior.
Read our Composition guide for more details.
Type: FunctionComponent
Default: No default value

type

Description: Determines whether one or multiple items can be opened at the same time.
Type: enum
Full enum type definition
"single" | "multiple"
Default: No default value

defaultValue

Description: The value of the item to expand when initially rendered and type is "single". Use when you do not need to control the state of the items.
Type: string
Default: No default value

value

Description: The controlled value of the item to expand when type is "single". Must be used in conjunction with onValueChange$.
Type: Signal
Full Signal type definition
Signal<string>
Default: No default value

onValueChange$

Description: Event handler called when the expanded state of an item changes and type is "single".
Type: QRL
Full QRL type definition
QRL<(value: string) => void>
Default: No default value

defaultValue

Description: The value of the item to expand when initially rendered and type is "multiple". Use when you do not need to control the state of the items.
Type: string[]
Default: No default value

value

Description: The controlled value of the item to expand when type is "multiple". Must be used in conjunction with onValueChange$.
Type: Signal
Full Signal type definition
Signal<string[]>
Default: No default value

onValueChange$

Description: Event handler called when the expanded state of an item changes and type is "multiple".
Type: QRL
Full QRL type definition
QRL<(value: string[]) => void>
Default: No default value

collapsible

Description: When type is "single", allows closing content when clicking trigger for an open item.
Type: boolean
Default: No default value

disabled

Description: When true, prevents the user from interacting with the accordion and all its items.
Type: boolean
Default: No default value

style

Description: The inline style for the element.
Type: CSSProperties
Default: No default value

Prop	Type	Default
`as` Prop as description Change the default rendered element for the one passed as, merging their props and behavior. Read our Composition guide for more details.	`FunctionComponent`	No default value
`type *` Prop type description Determines whether one or multiple items can be opened at the same time.	`enum` Full enum type definition `"single" \| "multiple"`	No default value
`defaultValue` Prop defaultValue description The value of the item to expand when initially rendered and `type` is `"single"`. Use when you do not need to control the state of the items.	`string`	No default value
`value` Prop value description The controlled value of the item to expand when `type` is `"single"`. Must be used in conjunction with `onValueChange$`.	`Signal` Full Signal type definition `Signal<string>`	No default value
`onValueChange$` Prop onValueChange$ description Event handler called when the expanded state of an item changes and `type` is `"single"`.	`QRL` Full QRL type definition `QRL<(value: string) => void>`	No default value
`defaultValue` Prop defaultValue description The value of the item to expand when initially rendered and `type` is `"multiple"`. Use when you do not need to control the state of the items.	`string[]`	No default value
`value` Prop value description The controlled value of the item to expand when `type` is `"multiple"`. Must be used in conjunction with `onValueChange$`.	`Signal` Full Signal type definition `Signal<string[]>`	No default value
`onValueChange$` Prop onValueChange$ description Event handler called when the expanded state of an item changes and `type` is `"multiple"`.	`QRL` Full QRL type definition `QRL<(value: string[]) => void>`	No default value
`collapsible` Prop collapsible description When `type` is `"single"`, allows closing content when clicking trigger for an open item.	`boolean`	No default value
`disabled` Prop disabled description When `true`, prevents the user from interacting with the accordion and all its items.	`boolean`	No default value
`style` Prop style description The inline style for the element.	`CSSProperties`	No default value

Data attributes

[data-scope]

Values: "accordion"

[data-part]

Values: "root"

[data-disabled]

Values: Present when disabled

Data attribute	Values
`[data-scope]`	`"accordion"`
`[data-part]`	`"root"`
`[data-disabled]`	Present when disabled

Item

Contains all the parts of a collapsible section. This component is based on the div element.

Props

as

Description: Change the default rendered element for the one passed as, merging their props and behavior.
Read our Composition guide for more details.
Type: FunctionComponent
Default: No default value

value

Description: A unique value for the item.
Type: string
Default: No default value

disabled

Description: When true, prevents the user from interacting with the item.
Type: boolean
Default: No default value

style

Description: The inline style for the element.
Type: CSSProperties
Default: No default value

Prop	Type	Default
`as` Prop as description Change the default rendered element for the one passed as, merging their props and behavior. Read our Composition guide for more details.	`FunctionComponent`	No default value
`value *` Prop value description A unique value for the item.	`string`	No default value
`disabled` Prop disabled description When `true`, prevents the user from interacting with the item.	`boolean`	No default value
`style` Prop style description The inline style for the element.	`CSSProperties`	No default value

Data attributes

[data-scope]

Values: "accordion"

[data-part]

Values: "item"

[data-state]

Values: "open" | "closed"

[data-disabled]

Values: Present when disabled

Data attribute	Values
`[data-scope]`	`"accordion"`
`[data-part]`	`"item"`
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

ItemHeader

Wraps an Accordion.ItemTrigger. Use the level prop to update it to the appropriate heading level for your page. This component is based on the h3 element.

Props

as

Description: Change the default rendered element for the one passed as, merging their props and behavior.
Read our Composition guide for more details.
Type: FunctionComponent
Default: No default value

level

Description: The level of the heading, determines which tag will be used (h1-h6).
Type: enum
Full enum type definition
"1" | "2" | "3" | "4" | "5" | "6"
Default: "3"

style

Description: The inline style for the element.
Type: CSSProperties
Default: No default value

Prop	Type	Default
`as` Prop as description Change the default rendered element for the one passed as, merging their props and behavior. Read our Composition guide for more details.	`FunctionComponent`	No default value
`level` Prop level description The level of the heading, determines which tag will be used (h1-h6).	`enum` Full enum type definition `"1" \| "2" \| "3" \| "4" \| "5" \| "6"`	`"3"`
`style` Prop style description The inline style for the element.	`CSSProperties`	No default value

Data attributes

[data-scope]

Values: "accordion"

[data-part]

Values: "item-header"

[data-state]

Values: "open" | "closed"

[data-level]

Values: "1" | "2" | "3" | "4" | "5" | "6"

[data-disabled]

Values: Present when disabled

Data attribute	Values
`[data-scope]`	`"accordion"`
`[data-part]`	`"item-header"`
`[data-state]`	`"open" \| "closed"`
`[data-level]`	`"1" \| "2" \| "3" \| "4" \| "5" \| "6"`
`[data-disabled]`	Present when disabled

ItemTrigger

Toggles the collapsed state of its associated item. It should be nested inside of an Accordion.ItemHeader. This component is based on the button element.

Props

as

Description: Change the default rendered element for the one passed as, merging their props and behavior.
Read our Composition guide for more details.
Type: FunctionComponent
Default: No default value

style

Description: The inline style for the element.
Type: CSSProperties
Default: No default value

Prop	Type	Default
`as` Prop as description Change the default rendered element for the one passed as, merging their props and behavior. Read our Composition guide for more details.	`FunctionComponent`	No default value
`style` Prop style description The inline style for the element.	`CSSProperties`	No default value

Data attributes

[data-scope]

Values: "accordion"

[data-part]

Values: "item-trigger"

[data-state]

Values: "open" | "closed"

[data-disabled]

Values: Present when disabled

Data attribute	Values
`[data-scope]`	`"accordion"`
`[data-part]`	`"item-trigger"`
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

ItemIndicator

An optional decorative element that indicates the state of the accordion item. It should be nested inside of an Accordion.ItemTrigger. This component is based on the span element.

Props

as

Description: Change the default rendered element for the one passed as, merging their props and behavior.
Read our Composition guide for more details.
Type: FunctionComponent
Default: No default value

style

Description: The inline style for the element.
Type: CSSProperties
Default: No default value

Prop	Type	Default
`as` Prop as description Change the default rendered element for the one passed as, merging their props and behavior. Read our Composition guide for more details.	`FunctionComponent`	No default value
`style` Prop style description The inline style for the element.	`CSSProperties`	No default value

Data attributes

[data-scope]

Values: "accordion"

[data-part]

Values: "item-indicator"

[data-state]

Values: "open" | "closed"

[data-disabled]

Values: Present when disabled

Data attribute	Values
`[data-scope]`	`"accordion"`
`[data-part]`	`"item-indicator"`
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

ItemPanel

The panel that expands/collapses. This component is based on the div element.

Props

as

Description: Change the default rendered element for the one passed as, merging their props and behavior.
Read our Composition guide for more details.
Type: FunctionComponent
Default: No default value

onOpen$

Description: Event handler called when the panel is fully open. If you animate the size of the panel when it opens this event handler was call after animation end.
Type: QRL
Full QRL type definition
QRL<() => void>
Default: No default value

onClose$

Description: Event handler called when the panel is fully close. If you animate the size of the panel when it closes this event handler was call after animation end.
Type: QRL
Full QRL type definition
QRL<() => void>
Default: No default value

style

Description: The inline style for the element.
Type: CSSProperties
Default: No default value

Prop	Type	Default
`as` Prop as description Change the default rendered element for the one passed as, merging their props and behavior. Read our Composition guide for more details.	`FunctionComponent`	No default value
`onOpen$` Prop onOpen$ description Event handler called when the panel is fully open. If you animate the size of the panel when it opens this event handler was call after animation end.	`QRL` Full QRL type definition `QRL<() => void>`	No default value
`onClose$` Prop onClose$ description Event handler called when the panel is fully close. If you animate the size of the panel when it closes this event handler was call after animation end.	`QRL` Full QRL type definition `QRL<() => void>`	No default value
`style` Prop style description The inline style for the element.	`CSSProperties`	No default value

Data attributes

[data-scope]

Values: "accordion"

[data-part]

Values: "item-panel"

[data-state]

Values: "open" | "closed"

[data-disabled]

Values: Present when disabled

Data attribute	Values
`[data-scope]`	`"accordion"`
`[data-part]`	`"item-panel"`
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

ItemContent

The component that contains the collapsible content for an item. Must be nested inside Accordion.ItemPanel. This component is based on the div element.

Props

as

Description: Change the default rendered element for the one passed as, merging their props and behavior.
Read our Composition guide for more details.
Type: FunctionComponent
Default: No default value

style

Description: The inline style for the element.
Type: CSSProperties
Default: No default value

Prop	Type	Default
`as` Prop as description Change the default rendered element for the one passed as, merging their props and behavior. Read our Composition guide for more details.	`FunctionComponent`	No default value
`style` Prop style description The inline style for the element.	`CSSProperties`	No default value

Data attributes

[data-scope]

Values: "accordion"

[data-part]

Values: "item-content"

[data-state]

Values: "open" | "closed"

[data-disabled]

Values: Present when disabled

Data attribute	Values
`[data-scope]`	`"accordion"`
`[data-part]`	`"item-content"`
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

Examples

Expanded by default

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

import { component$ } from '@builder.io/qwik';
import { Accordion } from 'qwik-primitives';

export const AccordionDemo = component$(() => {
  return (
    <Accordion.Root type="single" defaultValue="item-1">
      <Accordion.Item value="item-1">
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>Is it accessible?</Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel>
          <Accordion.ItemContent>Yes. It adheres to the WAI-ARIA design pattern.</Accordion.ItemContent>
        </Accordion.ItemPanel>
      </Accordion.Item>

      <Accordion.Item value="item-2">
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>Is it unstyled?</Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel>
          <Accordion.ItemContent>Yes. It's unstyled by default.</Accordion.ItemContent>
        </Accordion.ItemPanel>
      </Accordion.Item>

      <Accordion.Item value="item-3">
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>Can it be animated?</Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel>
          <Accordion.ItemContent>Yes! You can animate the Accordion with CSS.</Accordion.ItemContent>
        </Accordion.ItemPanel>
      </Accordion.Item>
    </Accordion.Root>
  );
});

Allow collapsing all items

Use the collapsible prop to allow all items to close.

import { component$ } from '@builder.io/qwik';
import { Accordion } from 'qwik-primitives';

export const AccordionDemo = component$(() => {
  return (
    <Accordion.Root type="single" collapsible={true}>
      <Accordion.Item value="item-1">
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>Is it accessible?</Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel>
          <Accordion.ItemContent>Yes. It adheres to the WAI-ARIA design pattern.</Accordion.ItemContent>
        </Accordion.ItemPanel>
      </Accordion.Item>

      <Accordion.Item value="item-2">
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>Is it unstyled?</Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel>
          <Accordion.ItemContent>Yes. It's unstyled by default.</Accordion.ItemContent>
        </Accordion.ItemPanel>
      </Accordion.Item>

      <Accordion.Item value="item-3">
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>Can it be animated?</Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel>
          <Accordion.ItemContent>Yes! You can animate the Accordion with CSS.</Accordion.ItemContent>
        </Accordion.ItemPanel>
      </Accordion.Item>
    </Accordion.Root>
  );
});

Multiple items open at the same time

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

import { component$ } from '@builder.io/qwik';
import { Accordion } from 'qwik-primitives';

export const AccordionDemo = component$(() => {
  return (
    <Accordion.Root type="multiple">
      <Accordion.Item value="item-1">
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>Is it accessible?</Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel>
          <Accordion.ItemContent>Yes. It adheres to the WAI-ARIA design pattern.</Accordion.ItemContent>
        </Accordion.ItemPanel>
      </Accordion.Item>

      <Accordion.Item value="item-2">
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>Is it unstyled?</Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel>
          <Accordion.ItemContent>Yes. It's unstyled by default.</Accordion.ItemContent>
        </Accordion.ItemPanel>
      </Accordion.Item>

      <Accordion.Item value="item-3">
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>Can it be animated?</Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel>
          <Accordion.ItemContent>Yes! You can animate the Accordion with CSS.</Accordion.ItemContent>
        </Accordion.ItemPanel>
      </Accordion.Item>
    </Accordion.Root>
  );
});

Rotated icon when item open

You can nest inside of an Accordion.ItemIndicator extra decorative elements, such as chevrons, and rotate it when the item is open.

import type { PropsOf } from '@builder.io/qwik';
import { component$, useStyles$ } from '@builder.io/qwik';
import { Accordion } from 'qwik-primitives';
import styles from './styles.css?inline';

const ChevronLeftIcon = component$<PropsOf<'svg'>>((props) => {
  return (
    <svg
      aria-hidden="true"
      focusable="false"
      width="15"
      height="15"
      viewBox="0 0 15 15"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z"
        fill="currentColor"
        fill-rule="evenodd"
        clip-rule="evenodd"
      ></path>
    </svg>
  );
});

export const AccordionDemo = component$(() => {
  useStyles$(styles);

  return (
    <Accordion.Root type="single">
      <Accordion.Item value="item-1">
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>
            Is it accessible?
            <Accordion.ItemIndicator class="accordion-item-indicator">
              <ChevronLeftIcon class="accordion-item-indicator-icon" />
            </Accordion.ItemIndicator>
          </Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel>
          <Accordion.ItemContent>Yes. It adheres to the WAI-ARIA design pattern.</Accordion.ItemContent>
        </Accordion.ItemPanel>
      </Accordion.Item>

      <Accordion.Item value="item-2">
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>
            Is it unstyled?
            <Accordion.ItemIndicator class="accordion-item-indicator">
              <ChevronLeftIcon class="accordion-item-indicator-icon" />
            </Accordion.ItemIndicator>
          </Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel>
          <Accordion.ItemContent>Yes. It's unstyled by default.</Accordion.ItemContent>
        </Accordion.ItemPanel>
      </Accordion.Item>

      <Accordion.Item value="item-3">
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>
            Can it be animated?
            <Accordion.ItemIndicator class="accordion-item-indicator">
              <ChevronLeftIcon class="accordion-item-indicator-icon" />
            </Accordion.ItemIndicator>
          </Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel>
          <Accordion.ItemContent>Yes! You can animate the Accordion with CSS or JavaScript.</Accordion.ItemContent>
        </Accordion.ItemPanel>
      </Accordion.Item>
    </Accordion.Root>
  );
});

.accordion-item-indicator[data-state='open'] > .accordion-item-indicator-icon {
  transform: rotate(-90deg);
}

Animating item panel size

Use the grid-template-rows CSS property with 0fr or 1fr value to animate the size of the item panel when it opens/closes.

import { component$, useStyles$ } from '@builder.io/qwik';
import { Accordion } from 'qwik-primitives';
import styles from './styles.css?inline';

export const AccordionDemo = component$(() => {
  useStyles$(styles);

  return (
    <Accordion.Root type="single">
      <Accordion.Item value="item-1">
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>Is it accessible?</Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel class="accordion-item-panel">
          <Accordion.ItemContent>Yes. It adheres to the WAI-ARIA design pattern.</Accordion.ItemContent>
        </Accordion.ItemPanel>
      </Accordion.Item>

      <Accordion.Item value="item-2">
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>Is it unstyled?</Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel class="accordion-item-panel">
          <Accordion.ItemContent>Yes. It's unstyled by default.</Accordion.ItemContent>
        </Accordion.ItemPanel>
      </Accordion.Item>

      <Accordion.Item value="item-3">
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>Can it be animated?</Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel class="accordion-item-panel">
          <Accordion.ItemContent>Yes! You can animate the Accordion with CSS or JavaScript.</Accordion.ItemContent>
        </Accordion.ItemPanel>
      </Accordion.Item>
    </Accordion.Root>
  );
});

.accordion-item-panel[data-state='open'] {
  animation: accordion-item-panel-down 300ms ease-out;
}

.accordion-item-panel[data-state='closed'] {
  animation: accordion-item-panel-up 300ms ease-out;
}

@keyframes accordion-item-panel-down {
  0% {
    grid-template-rows: 0fr;
  }
  100% {
    grid-template-rows: 1fr;
  }
}

@keyframes accordion-item-panel-up {
  0% {
    grid-template-rows: 1fr;
  }
  100% {
    grid-template-rows: 0fr;
  }
}

Accessibility

Adheres to the Accordion WAI-ARIA design pattern.

Keyboard Interactions

Space

Description: When focus is on an Accordion.ItemTrigger of a collapsed section, expands the section.

Enter

Description: When focus is on an Accordion.ItemTrigger of a collapsed section, expands the section.

Tab

Description: Moves focus to the next focusable element.

Shift + Tab

Description: Moves focus to the previous focusable element.

ArrowDown

Description: When focus is on an Accordion.ItemTrigger, moves focus to the next enabled Accordion.ItemTrigger.

ArrowUp

Description: When focus is on an Accordion.ItemTrigger, moves focus to the previous enabled Accordion.ItemTrigger.

Home

Description: When focus is on an Accordion.ItemTrigger, moves focus to the first enabled Accordion.ItemTrigger.

End

Description: When focus is on an Accordion.ItemTrigger, moves focus to the last enabled Accordion.ItemTrigger.

Key	Description
`Space`	When focus is on an `Accordion.ItemTrigger` of a collapsed section, expands the section.
`Enter`	When focus is on an `Accordion.ItemTrigger` of a collapsed section, expands the section.
`Tab`	Moves focus to the next focusable element.
`Shift + Tab`	Moves focus to the previous focusable element.
`ArrowDown`	When focus is on an `Accordion.ItemTrigger`, moves focus to the next enabled `Accordion.ItemTrigger`.
`ArrowUp`	When focus is on an `Accordion.ItemTrigger`, moves focus to the previous enabled `Accordion.ItemTrigger`.
`Home`	When focus is on an `Accordion.ItemTrigger`, moves focus to the first enabled `Accordion.ItemTrigger`.
`End`	When focus is on an `Accordion.ItemTrigger`, moves focus to the last enabled `Accordion.ItemTrigger`.