Accordion

The accordion component enables users to collapse and expand multiple content sections within a limited space. This helps group and hide content effectively, maintaining a clean interface and reducing clutter.

import {AccordionModule} from "@qualcomm-ui/angular/accordion"

Usage

The accordion requires each of its items to have a unique value input.
The accordion is keyboard-navigable once focused. Arrow keys can be used to move to the next or previous item. Home and End keys can be used to jump to the first or last item, respectively.

Examples

Simple

The simple API bundles the accordion item's subcomponents together into a single directive.

Brand

Accordion Text 1

Secondary text

Accordion Text 2

Secondary text

<div class="w-96" q-accordion [defaultValue]="['a']">
  <div
    q-accordion-item
    secondaryText="Secondary text"
    text="Accordion Text 1"
    value="a"
  >
    <div q-lorem-ipsum></div>
  </div>
  <div
    q-accordion-item
    secondaryText="Secondary text"
    text="Accordion Text 2"
    value="b"
  >
    <div q-lorem-ipsum></div>
  </div>
</div>

Simple & Directives

Provide child directives to customize specific elements while keeping the simple API's default structure.

Brand

Accordion Text 1

Secondary text

Accordion Text 2

Secondary text

<div q-accordion-item value="a">
  <div data-test-id="accordion-1" q-accordion-item-text>
    Accordion Text 1
  </div>
  <div q-accordion-item-secondary-text>Secondary text</div>
  <div q-lorem-ipsum></div>
</div>

Composite

Use the q-accordion-item-root directive for full control over each part of the item. This is useful when you need custom styling or layout, but requires you to provide each subcomponent.

Brand

Accordion Text 1Secondary text

Accordion Text 2Secondary text

<div q-accordion-item-root value="a">
  <button q-accordion-item-trigger>
    <span q-accordion-item-text>Accordion Text 1</span>
    <span q-accordion-item-secondary-text>Secondary text</span>
    <q-accordion-item-indicator />
  </button>
  <div q-accordion-item-content>
    <div q-lorem-ipsum></div>
  </div>
</div>

Starting Indicator

To display the expand/collapse indicator at the start of the trigger, make it the first child of the q-accordion-item-trigger element.

The padding of the item's content will automatically adjust.

Brand

Accordion Text 1

Accordion Text 2

Accordion Text 3

<div class="w-96" q-accordion>
  @for (item of items; track item.value) {
    <div q-accordion-item-root [value]="item.value">
      <button q-accordion-item-trigger>
        <q-accordion-item-indicator />
        <span q-accordion-item-text>
          {{ item.text }}
        </span>
      </button>
      <div q-accordion-item-content>
        {{ item.content }}
      </div>
    </div>
  }
</div>

Multiple

By default, only a single accordion section can be open at a time. Setting multiple allows multiple sections to be open or closed simultaneously.

Brand

Accordion Text 1

Accordion Text 2

Accordion Text 3

<div class="w-96" multiple q-accordion>
  @for (item of items; track item.value) {
    <div q-accordion-item [text]="item.text" [value]="item.value">
      {{ item.content }}
    </div>
  }
</div>

Collapsible

When multiple is not set, enabling collapsible lets the user close an open accordion item by clicking it again.

Brand

Accordion Text 1

Accordion Text 2

Accordion Text 3

<div class="w-96" collapsible q-accordion [defaultValue]="['a']">
  @for (item of items; track item.value) {
    <div q-accordion-item [text]="item.text" [value]="item.value">
      {{ item.content }}
    </div>
  }
</div>

Default Value

The defaultValue input allows you to set the initial state for the accordion by specifying which accordion item or items (if multiple is set) should be open by default. It expects an array of values that should match those passed to each accordion item.

Brand

Accordion Text 1

Accordion Text 2

Accordion Text 3

<div class="w-96" q-accordion [defaultValue]="['a']">
  @for (item of items; track item.value) {
    <div q-accordion-item [text]="item.text" [value]="item.value">
      {{ item.content }}
    </div>
  }
</div>

Disabled

You can disable accordion items by setting their disabled input. This prevents the item from being interacted with. You can disable the entire accordion by setting the disabled input on the accordion root element.

Brand

Accordion Text 1

Accordion Text 2

Accordion Text 3

<div class="w-full" q-accordion [disabled]="disabled()">
  @for (item of items; track item.value; let i = $index) {
    <div
      q-accordion-item
      [disabled]="item.disabled"
      [text]="item.text"
      [value]="item.value"
    >
      {{ item.content }}
    </div>
  }
</div>

Uncontained

Set the uncontained input when the accordion is not placed inside a container and needs to align flush with adjacent layout elements—such as when positioned directly below a paragraph of text. This input removes the default horizontal padding from accordion items, allowing them to sit seamlessly within the surrounding content.

Brand

Accordion Text 1

Accordion Text 2

Accordion Text 3

<div class="w-96" q-accordion uncontained>
  @for (item of items; track item.value) {
    <div q-accordion-item [text]="item.text" [value]="item.value">
      {{ item.content }}
    </div>
  }
</div>

Size

Use the size input to control the size of the accordion items. The available sizes are sm, md (default), and lg.

Brand

Accordion Text 1

Accordion Text 2

Accordion Text 3

Small Medium Large

<div class="w-full" q-accordion [size]="size()">
  @for (item of items; track item.value) {
    <div q-accordion-item [text]="item.text" [value]="item.value">
      {{ item.content }}
    </div>
  }
</div>

Secondary Text

Use the q-accordion-item-trigger-secondary directive to display additional text opposite the trigger title.

Brand

Accordion Text 1

Secondary text

Accordion Text 2

Secondary text

Accordion Text 3

Secondary text

<div class="w-96" q-accordion>
  @for (item of items; track item.value) {
    <div
      q-accordion-item
      [secondaryText]="item.secondaryText"
      [text]="item.text"
      [value]="item.value"
    >
      {{ item.content }}
    </div>
  }
</div>

Icon

Pass an icon to the icon input on the q-accordion-item-trigger element to display it next to the trigger title.

Brand

Accordion Text 1

Accordion Text 2

Accordion Text 3

<div class="w-96" q-accordion>
  @for (item of items; track item.value) {
    <div
      icon="FileChartColumn"
      q-accordion-item
      [text]="item.text"
      [value]="item.value"
    >
      {{ item.content }}
    </div>
  }
</div>

UX considerations

In order to prevent visual confusion, only one icon can appear next to the trigger title. If you place the indicator at the start, the icon input will be ignored.

Change Callback

The valueChanged output allows you to listen for changes in the accordion's value.

Brand

Accordion Text 1

Accordion Text 2

Accordion Text 3

currently opened: a

<div
  multiple
  q-accordion
  [value]="openedItems()"
  (valueChanged)="openedItems.set($event)"
>
  @for (item of items; track item.value) {
    <div q-accordion-item [text]="item.text" [value]="item.value">
      {{ item.content }}
    </div>
  }
</div>

Focus Callback

The focusChanged output allows you to listen for focus events on the accordion's items.

Brand

Accordion Text 1

Accordion Text 2

Accordion Text 3

currently focused: none

<div
  multiple
  q-accordion
  [defaultValue]="['a']"
  (focusChanged)="currentValue.set($event || '')"
>
  @for (item of items; track item.value) {
    <div q-accordion-item [text]="item.text" [value]="item.value">
      {{ item.content }}
    </div>
  }
</div>

Shortcuts

Item Content

The q-accordion-item-content directive is a shortcut for the following:

<div q-accordion-item-content-animator>
  <div q-accordion-item-content-body>
    <ng-content />
  </div>
</div>

API

q-accordion

Prop	Type	Default
collapsible Whether sections can be collapsed (in non-multiple mode).	boolean
defaultValue Initial value of the accordion.	string[]
dir The document's text/writing direction.	'ltr' \| 'rtl'
disabled The disabled state of the accordion.	boolean
id HTML id attribute. If omitted, a unique identifier will be generated for accessibility.)	string
multiple Whether multiple accordion items can be expanded at once.	boolean
size The size of the accordion.	\| 'sm' \| 'md' \| 'lg'	'md'
uncontained The uncontained aspect of the accordion that removes horizontal margins.	boolean
value Value(s) of the accordion's open item(s).	string[]
(focusChanged) Focus change callback.	string
(valueChanged) Value change callback.	string[]

collapsible

Type

boolean

Description

Whether sections can be collapsed (in non-multiple mode).

defaultValue

Type

string[]

Description

Initial value of the accordion.

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

disabled

Type

boolean

Description

The disabled state of the accordion.

Type

string

Description

HTML id attribute. If omitted, a unique identifier will be generated for accessibility.)

multiple

Type

boolean

Description

Whether multiple accordion items can be expanded at once.

size

Type

| 'sm'
| 'md'
| 'lg'

Description

The size of the accordion.

uncontained

Type

boolean

Description

The uncontained aspect of the accordion that removes horizontal margins.

value

Type

string[]

Description

Value(s) of the accordion's open item(s).

(focusChanged)

Type

string

Description

Focus change callback.

(valueChanged)

Type

string[]

Description

Value change callback.

q-accordion-item

The simple form of the Accordion Item component. Use properties for customization like the text and icon. The content of the panel is provided via the default slot. Refer to the documentation to learn more.

<div q-accordion-item text="...">
  Panel contents...
</div>

Prop	Type
disabled The disabled state of the accordion item.	boolean
icon Optional icon for the item.	\| LucideIconData \| string
id id attribute. If omitted, a unique identifier will be generated for accessibility.)	string
secondaryText The secondary text label for the item.	string

text The primary text label for the item.	string

value The value of the accordion item.	string

disabled

Type

boolean

Description

The disabled state of the accordion item.

icon

Type

| LucideIconData
| string

Description

Optional icon for the item.

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.)

secondaryText

Type

string

Description

The secondary text label for the item.

text

Type

string

Description

The primary text label for the item.

value

Type

string

Description

The value of the accordion item.

q-accordion-item-trigger

Prop	Type
icon lucide-angular icon, positioned before the trigger title.	\| LucideIconData \| string

id id attribute. If omitted, a unique identifier will be generated for accessibility.)	string

icon

Type

| LucideIconData
| string

Description

lucide-angular icon, positioned before the trigger title.

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.)

Tooltip

Breadcrumbs