Accordion

The TkAccordion component is a user interface element that organizes content under headers, allowing users to expand and collapse sections by clicking on each header. It is particularly useful for improving layout and readability on pages with extensive information.

React
Vue
Angular

import { TkAccordion, TkAccordionItem } from '@takeoff-ui/react'

import { TkAccordion, TkAccordionItem } from '@takeoff-ui/vue'

import { TkAccordion, TkAccordionItem } from '@takeoff-ui/angular'

Playground

Preview

Panel 1 Content

Panel 2 Content

Panel 3 Content

Generated Code

<TkAccordion  type="grouped"
  arrowPosition="right"
  expandIcon="keyboard_arrow_down"
  collapseIcon="keyboard_arrow_up"
>  <TkAccordionItem header="Panel 1 Title">    <span slot="content">Panel 1 Content</span>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 2 Title">    <span slot="content">Panel 2 Content</span>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 3 Title">    <span slot="content">Panel 3 Content</span>
  </TkAccordionItem>
</TkAccordion>

<TkAccordion  type="grouped"
  arrowPosition="right"
  expandIcon="keyboard_arrow_down"
  collapseIcon="keyboard_arrow_up"
>  <TkAccordionItem header="Panel 1 Title">    <span slot="content">Panel 1 Content</span>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 2 Title">    <span slot="content">Panel 2 Content</span>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 3 Title">    <span slot="content">Panel 3 Content</span>
  </TkAccordionItem>
</TkAccordion>

<tk-accordion  type="grouped"
  arrowPosition="right"
  expandIcon="keyboard_arrow_down"
  collapseIcon="keyboard_arrow_up"
>  <tk-accordion-item header="Panel 1 Title">    <span slot="content">Panel 1 Content</span>
  </tk-accordion-item>
  <tk-accordion-item header="Panel 2 Title">    <span slot="content">Panel 2 Content</span>
  </tk-accordion-item>
  <tk-accordion-item header="Panel 3 Title">    <span slot="content">Panel 3 Content</span>
  </tk-accordion-item>
</tk-accordion>

Controls

Type:

Arrow Position:

Active Index:

Expand Icon:

Collapse Icon:

Type

Establishes 2 different accordion styles grouped, divided via type property.

Grouped

Panel 1 Title

Panel 1 Content

Panel 2 Title

Panel 2 Content

Panel 3 Title

Panel 3 Content

Divided

Panel 1 Title

Panel 1 Content

Panel 2 Title

Panel 2 Content

Panel 3 Title

Panel 3 Content

View Code

React
Vue
Angular

<TkAccordion type="grouped">
  <TkAccordionItem>
    <span slot="header">Panel 1 Title</span>
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
  <TkAccordionItem>
    <span slot="header">Panel 2 Title</span>
    <div slot="content">Panel 2 Content</div>
  </TkAccordionItem>
  <TkAccordionItem>
    <span slot="header">Panel 3 Title</span>
    <div slot="content">Panel 3 Content</div>
  </TkAccordionItem>
</TkAccordion>

<TkAccordion type="divided">
  <TkAccordionItem>
    <span slot="header">Panel 1 Title</span>
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
  <TkAccordionItem>
    <span slot="header">Panel 2 Title</span>
    <div slot="content">Panel 2 Content</div>
  </TkAccordionItem>
  <TkAccordionItem>
    <span slot="header">Panel 3 Title</span>
    <div slot="content">Panel 3 Content</div>
  </TkAccordionItem>
</TkAccordion>

<TkAccordion type="grouped">
  <TkAccordionItem>
    <span slot="header">Panel 1 Title</span>
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
  <TkAccordionItem>
    <span slot="header">Panel 2 Title</span>
    <div slot="content">Panel 2 Content</div>
  </TkAccordionItem>
  <TkAccordionItem>
    <span slot="header">Panel 3 Title</span>
    <div slot="content">Panel 3 Content</div>
  </TkAccordionItem>
</TkAccordion>

<TkAccordion type="divided">
  <TkAccordionItem>
    <span slot="header">Panel 1 Title</span>
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
  <TkAccordionItem>
    <span slot="header">Panel 2 Title</span>
    <div slot="content">Panel 2 Content</div>
  </TkAccordionItem>
  <TkAccordionItem>
    <span slot="header">Panel 3 Title</span>
    <div slot="content">Panel 3 Content</div>
  </TkAccordionItem>
</TkAccordion>

<tk-accordion type="grouped">
  <tk-accordion-item>
    <span slot="header">Panel 1 Title</span>
    <div slot="content">Panel 1 Content</div>
  </tk-accordion-item>
  <tk-accordion-item>
    <span slot="header">Panel 2 Title</span>
    <div slot="content">Panel 2 Content</div>
  </tk-accordion-item>
  <tk-accordion-item>
    <span slot="header">Panel 3 Title</span>
    <div slot="content">Panel 3 Content</div>
  </tk-accordion-item>
</tk-accordion>

<tk-accordion type="divided">
  <tk-accordion-item>
    <span slot="header">Panel 1 Title</span>
    <div slot="content">Panel 1 Content</div>
  </tk-accordion-item>
  <tk-accordion-item>
    <span slot="header">Panel 2 Title</span>
    <div slot="content">Panel 2 Content</div>
  </tk-accordion-item>
  <tk-accordion-item>
    <span slot="header">Panel 3 Title</span>
    <div slot="content">Panel 3 Content</div>
  </tk-accordion-item>
</tk-accordion>

Mode

Controls the display mode of the accordion component default, compact via mode property.

Default Mode

Panel 1 Title

Panel 1 Content

Panel 2 Title

Panel 2 Content

Compact Mode

Panel 1 Title

Panel 1 Content

Panel 2 Title

Panel 2 Content

View Code

React
Vue
Angular

<TkAccordion mode="default">
  <TkAccordionItem>
    <span slot="header">Panel 1 Title</span>
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
</TkAccordion>

<TkAccordion mode="compact">
  <TkAccordionItem>
    <span slot="header">Panel 1 Title</span>
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
</TkAccordion>

<TkAccordion mode="default">
  <TkAccordionItem>
    <span slot="header">Panel 1 Title</span>
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
</TkAccordion>

<TkAccordion mode="compact">
  <TkAccordionItem>
    <span slot="header">Panel 1 Title</span>
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
</TkAccordion>

<tk-accordion mode="default">
    <tk-accordion-item>
      <span slot="header">Panel 1 Title</span>
      <div slot="content">Panel 1 Content</div>
    </tk-accordion-item>
  </tk-accordion>
  
  <tk-accordion mode="compact">
    <tk-accordion-item>
      <span slot="header">Panel 1 Title</span>
      <div slot="content">Panel 1 Content</div>
    </tk-accordion-item>
  </tk-accordion>

Allow Multiple

Allows multiple accordion items to be expanded simultaneously.

Panel 1 Content

Panel 2 Content

Panel 3 Content

View Code

React
Vue
Angular

<TkAccordion allowMultiple={true}>
  <TkAccordionItem header="Panel 1">
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 2">
    <div slot="content">Panel 2 Content</div>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 3">
    <div slot="content">Panel 3 Content</div>
  </TkAccordionItem>
</TkAccordion>

<TkAccordion :allowMultiple="true">
  <TkAccordionItem header="Panel 1">
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 2">
    <div slot="content">Panel 2 Content</div>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 3">
    <div slot="content">Panel 3 Content</div>
  </TkAccordionItem>
</TkAccordion>

<tk-accordion [allow-multiple]="true">
  <tk-accordion-item header="Panel 1">
    <div slot="content">Panel 1 Content</div>
  </tk-accordion-item>
  <tk-accordion-item header="Panel 2">
    <div slot="content">Panel 2 Content</div>
  </tk-accordion-item>
  <tk-accordion-item header="Panel 3">
    <div slot="content">Panel 3 Content</div>
  </tk-accordion-item>
</tk-accordion>

Active Index

Tab to expand initially can be defined with the activeIndex property.

Panel 1 Content

Panel 2 Content

Panel 3 Content

View Code

React
Vue
Angular

const [active,setActive] = useState([0, 1])
<TkAccordion 
  allowMultiple={true}  
  activeIndex={active} 
  onTkActiveIndexChange={(e: CustomEvent) => setActive(e.detail)}
>
  <TkAccordionItem header="Panel 1">
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 2">
    <div slot="content">Panel 2 Content</div>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 3">
    <div slot="content">Panel 3 Content</div>
  </TkAccordionItem>
</TkAccordion>

const active = ref([0, 1])
<TkAccordion 
  :allowMultiple="true" 
  :activeIndex="active" 
  @tk-active-index-change="(e) => active = e.detail"
>
  <TkAccordionItem header="Panel 1">
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 2">
    <div slot="content">Panel 2 Content</div>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 3">
    <div slot="content">Panel 3 Content</div>
  </TkAccordionItem>
</TkAccordion>

active = [0, 1];
onActiveIndexChange(e: CustomEvent) {
  this.active = e.detail;
}
<tk-accordion 
  allow-multiple="true"
  [active-index]="active" 
  (tkActiveIndexChange)="onActiveIndexChange($event)"
>
  <tk-accordion-item header="Panel 1">
    <div slot="content">Panel 1 Content</div>
  </tk-accordion-item>
  <tk-accordion-item header="Panel 2">
    <div slot="content">Panel 2 Content</div>
  </tk-accordion-item>
  <tk-accordion-item header="Panel 3">
    <div slot="content">Panel 3 Content</div>
  </tk-accordion-item>
</tk-accordion>

Item Active

Tab to expand initially can be defined with the active property in accordion item component.

Panel 1 Content

Panel 2 Content

Panel 3 Content

View Code

React
Vue
Angular

<TkAccordion>
  <TkAccordionItem header="Panel 1" active={true}>
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 2">
    <div slot="content">Panel 2 Content</div>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 3">
    <div slot="content">Panel 3 Content</div>
  </TkAccordionItem>
</TkAccordion>

<TkAccordion>
  <TkAccordionItem header="Panel 1" :active="true">
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 2">
    <div slot="content">Panel 2 Content</div>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 3">
    <div slot="content">Panel 3 Content</div>
  </TkAccordionItem>
</TkAccordion>

<tk-accordion>
  <tk-accordion-item header="Panel 1" [active]="true">
    <div slot="content">Panel 1 Content</div>
  </tk-accordion-item>
  <tk-accordion-item header="Panel 2">
    <div slot="content">Panel 2 Content</div>
  </tk-accordion-item>
  <tk-accordion-item header="Panel 3">
    <div slot="content">Panel 3 Content</div>
  </tk-accordion-item>
</tk-accordion>

Custom Icon

The icon property on AccordionItem allows for icon customization.

Panel 1 Content

Panel 2 Content

Panel 3 Content

View Code

React
Vue
Angular

<TkAccordion>
  <TkAccordionItem header="Panel 1" icon="home">
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 2" icon={{ name: 'home', fill: true, color: 'red' }}>
    <div slot="content">Panel 2 Content</div>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 3">
    <div slot="content">Panel 3 Content</div>
  </TkAccordionItem>
</TkAccordion>

<TkAccordion>
  <TkAccordionItem header="Panel 1" icon="home">
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 2" :icon="{ name: 'home', fill: true, color: 'red' }">
    <div slot="content">Panel 2 Content</div>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 3">
    <div slot="content">Panel 3 Content</div>
  </TkAccordionItem>
</TkAccordion>

<tk-accordion>
  <tk-accordion-item header="Panel 1" icon="home">
    <div slot="content">Panel 1 Content</div>
  </tk-accordion-item>
  <tk-accordion-item header="Panel 2" [icon]="{ name: 'home', fill: true, color: 'red' }">
    <div slot="content">Panel 2 Content</div>
  </tk-accordion-item>
  <tk-accordion-item header="Panel 3">
    <div slot="content">Panel 3 Content</div>
  </tk-accordion-item>
</tk-accordion>

Arrow Position

Provides 2 positions for opening and closing arrows left, right via arrowPosition property.

Right Positioned Arrows

Panel 1 Title

Panel 1 Content

Panel 2 Title

Panel 2 Content

Panel 3 Title

Panel 3 Content

Left Positioned Arrows

Panel 1 Title

Panel 1 Content

Panel 2 Title

Panel 2 Content

Panel 3 Title

Panel 3 Content

View Code

React
Vue
Angular

<TkAccordion arrowPosition="right">
  <TkAccordionItem size="base" icon="flight">
    <span slot="header">Panel 1 Title</span>
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
  <TkAccordionItem icon="flight">
    <span slot="header">Panel 2 Title</span>
    <div slot="content">Panel 2 Content</div>
  </TkAccordionItem>
  <TkAccordionItem icon="travel">
    <span slot="header">Panel 3 Title</span>
    <div slot="content">Panel 3 Content</div>
  </TkAccordionItem>
</TkAccordion>

<TkAccordion arrowPosition="left">
  <TkAccordionItem size="base" icon="flight">
    <span slot="header">Panel 1 Title</span>
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
  <TkAccordionItem icon="flight">
    <span slot="header">Panel 2 Title</span>
    <div slot="content">Panel 2 Content</div>
  </TkAccordionItem>
  <TkAccordionItem icon="travel">
    <span slot="header">Panel 3 Title</span>
    <div slot="content">Panel 3 Content</div>
  </TkAccordionItem>
</TkAccordion>

<TkAccordion>
  <TkAccordionItem size="base" icon="flight">
    <span slot="header">Panel 1 Title</span>
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
  <TkAccordionItem icon="flight">
    <span slot="header">Panel 2 Title</span>
    <div slot="content">Panel 2 Content</div>
  </TkAccordionItem>
  <TkAccordionItem icon="travel">
    <span slot="header">Panel 3 Title</span>
    <div slot="content">Panel 3 Content</div>
  </TkAccordionItem>
</TkAccordion>

<TkAccordion arrowPosition="left">
  <TkAccordionItem size="base" icon="flight">
    <span slot="header">Panel 1 Title</span>
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
  <TkAccordionItem icon="flight">
    <span slot="header">Panel 2 Title</span>
    <div slot="content">Panel 2 Content</div>
  </TkAccordionItem>
  <TkAccordionItem icon="travel">
    <span slot="header">Panel 3 Title</span>
    <div slot="content">Panel 3 Content</div>
  </TkAccordionItem>
</TkAccordion>

<tk-accordion>
  <tk-accordion-item size="base" icon="flight">
    <span slot="header">Panel 1 Title</span>
    <div slot="content">Panel 1 Content</div>
  </tk-accordion-item>
  <tk-accordion-item icon="flight">
    <span slot="header">Panel 2 Title</span>
    <div slot="content">Panel 2 Content</div>
  </tk-accordion-item>
  <tk-accordion-item icon="travel">
    <span slot="header">Panel 3 Title</span>
    <div slot="content">Panel 3 Content</div>
  </tk-accordion-item>
</tk-accordion>

<tk-accordion arrow-position="left">
  <tk-accordion-item size="base" icon="flight">
    <span slot="header">Panel 1 Title</span>
    <div slot="content">Panel 1 Content</div>
  </tk-accordion-item>
  <tk-accordion-item icon="flight">
    <span slot="header">Panel 2 Title</span>
    <div slot="content">Panel 2 Content</div>
  </tk-accordion-item>
  <tk-accordion-item icon="travel">
    <span slot="header">Panel 3 Title</span>
    <div slot="content">Panel 3 Content</div>
  </tk-accordion-item>
</tk-accordion>

Expand and Collapse Icons

Provides different icon options for expand and collapse expandIcon and collapseIcon properties.

Panel 1 Title

Panel 1 Content

Panel 2 Title

Panel 2 Content

View Code

React
Vue
Angular

<TkAccordion expandIcon="add" collapseIcon="remove">
  <TkAccordionItem icon="flight"> 
    <span slot="header">Panel 1 Title</span>
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
  <TkAccordionItem icon="flight">
    <span slot="header">Panel 2 Title</span>
    <div slot="content">Panel 2 Content</div>
  </TkAccordionItem>
</TkAccordion>

<TkAccordion expandIcon="add" collapseIcon="remove">
  <TkAccordionItem icon="flight">
    <span slot="header">Panel 1 Title</span>
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
  <TkAccordionItem icon="flight">
    <span slot="header">Panel 2 Title</span>
    <div slot="content">Panel 2 Content</div>
  </TkAccordionItem>
</TkAccordion>

<tk-accordion expand-icon="add" collapse-icon="remove">
  <tk-accordion-item icon="flight">
    <span slot="header">Panel 1 Title</span>
    <div slot="content">Panel 1 Content</div>
  </tk-accordion-item>
  <tk-accordion-item icon="flight">
    <span slot="header">Panel 2 Title</span>
    <div slot="content">Panel 2 Content</div>
  </tk-accordion-item>
</tk-accordion>

Size

The size property on AccordionItem controls the size of the panel.

Panel 1 Content

Panel 2 Content

View Code

React
Vue
Angular

<TkAccordion>
  <TkAccordionItem header="Base Size Panel" size="base">
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
  <TkAccordionItem header="Large Size Panel" size="large">
    <div slot="content">Panel 2 Content</div>
  </TkAccordionItem>
</TkAccordion>

<TkAccordion>
  <TkAccordionItem header="Base Size Panel" size="base">
    <div slot="content">Panel 1 Content</div>
  </TkAccordionItem>
  <TkAccordionItem header="Large Size Panel" size="large">
    <div slot="content">Panel 2 Content</div>
  </TkAccordionItem>
</TkAccordion>

<tk-accordion>
  <tk-accordion-item header="Base Size Panel" size="base">
    <div slot="content">Panel 1 Content</div>
  </tk-accordion-item>
  <tk-accordion-item header="Large Size Panel" size="large">
    <div slot="content">Panel 2 Content</div>
  </tk-accordion-item>
</tk-accordion>

Accordion API

Props

Type	Default	Description
`(string, number)[], number, string`	null	Currently active panel indexes. Can be a single value or an array. When allowMultiple is false, only the last value in the array will be used. Has priority over AccordionItem's active prop. To prevent conflicts, avoid using both simultaneously.
`boolean`	false	Allows multiple accordion items to be expanded simultaneously.
`"left", "right"`	'right'	Sets the position of opening and closing chevrons.
`IIconOptions, string`	'keyboard_arrow_up'	Sets the collapse icon
`IIconOptions, string`	'keyboard_arrow_down'	Sets the expand icon
`boolean`	false	Whether to hide the arrow icons.
`"compact", "default"`	'default'	Controls the display mode of the accordion component.
`"divided", "grouped"`	'grouped'	Sets accordion style for the component.

Events

Name	Description
tk-accordion-item-selected	Emitted when an accordion item is selected
tk-active-index-change	Emitted when an active index is changed

Slots

Name	Description
default	Default slot to detect TkAccordionItem components.

Interfaces

IAccordionItemSelect

interface IAccordionItemSelect {
  index: string | number;
  active: boolean;
}

Accordion Item API

Props

Type	Default	Description
`boolean`	null	Sets if the accordion is active.
`string`	null	Header text to display.
`IIconOptions, string`	null	Icon for accordion component.
`number, string`	null	Optional key for the accordion item.
`"base", "large"`	'base'	Sets size for the component.

Events

Name	Description
tk-active-change	Emitted when an active index is changed

Slots

Name	Description
content	Custom content template.
header	Custom header template that overrides the header prop if provided.

Playground​

Preview

Generated Code

Controls

Type​

Mode​

Allow Multiple​

Active Index​

Item Active​

Custom Icon​

Arrow Position​

Expand and Collapse Icons​

Size​

Accordion API​

Props​

Events​

Slots​

Interfaces​

IAccordionItemSelect​

Accordion Item API​

Props​

Events​

Slots​

Playground

Type

Mode

Allow Multiple

Active Index

Item Active

Custom Icon

Arrow Position

Expand and Collapse Icons

Size

Accordion API

Props

Events

Slots

Interfaces

IAccordionItemSelect

Accordion Item API

Props

Events

Slots