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

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

Vue

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

Angular

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

<TkAccordion allow-multiple="false" type="grouped">
  <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>
  <TkAccordionItem icon="travel">
    <span slot="header">Panel 3 Title</span>
    <div slot="content">Panel 3 Content</div>
  </TkAccordionItem>
</TkAccordion>

<TkAccordion allow-multiple="true" type="divided">
  <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>

Vue

<TkAccordion allow-multiple="false" type="grouped">
  <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>
  <TkAccordionItem icon="travel">
    <span slot="header">Panel 3 Title</span>
    <div slot="content">Panel 3 Content</div>
  </TkAccordionItem>
</TkAccordion>
<TkAccordion allow-multiple="true" type="divided">
  <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>

Angular

<tk-accordion allow-multiple="false" type="grouped">
    <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-item icon="travel">
      <span slot="header">Panel 3 Title</span>
      <div slot="content">Panel 3 Content</div>
    </tk-accordion-item>
  </tk-accordion>
  
  <tk-accordion allow-multiple="true" type="divided">
    <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>

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

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

Vue

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

Angular

<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

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

Vue

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

Angular

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

Accordion API

Props

Name	Type	Default	Description
	number, number[], string, 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.
	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
tkAccordionItemSelected	Emitted when an accordion item is selected

Slots

Name	Description
default	Default slot to detect TkAccordionItem components.

Interfaces

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

Accordion Item API

Props

Name	Type	Default	Description
	boolean	false	Sets if the accordion is active.
	string	null	Header text to display.
	IIconOptions, string	null	Icon for accordion component.
	string	null	Optional key for the accordion item.
	"base", "large"	'base'	Sets size for the component.
	()=>void	null	Toggle's the accordion item.

Slots

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