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'

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>

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>

<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>

<tk-accordion [allowMultiple]="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])
  <tk-accordion 
  :allow-multiple="true" 
  :active-index="active" 
  @tk-active-index-change="(e) => active = e.detail"
>
  <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 = [0, 1];
onActiveIndexChange(e: CustomEvent) {
  this.active = e.detail;
}
<tk-accordion 
  [allowMultiple]="true" 
  [activeIndex]="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>

<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>

<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">hello</div>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 2" icon={{ name: 'home', fill: true, color: 'red' }}>
    <div slot="content">merhaba</div>
  </TkAccordionItem>
  <TkAccordionItem header="Panel 3">
    <div slot="content">hallo</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>

<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 arrow-position="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 arrow-position="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 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 expand-icon="add" collapse-icon="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 expand-icon="add" collapse-icon="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>

<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>

<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.
`"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.

Type​

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​

Type

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