# Accordion

Table of Contents

###### Examples

Basic Usage
Default Open Panel

###### JavaScript Reference

Constructor
Requirements
Attributes
Properties
Methods

### Description

A widget that allows a single panel of content to be opened and closed.

### Basic Usage

    <k-accordion>
    <k-accordion-header for-panel="panel1">Panel 1</k-accordion-header>
    <k-accordion-panel name="panel1">
      <p class="m">Panel 1 content</p>
    </k-accordion-panel>
    <k-accordion-header for-panel="panel2">Panel 2</k-accordion-header>
    <k-accordion-panel name="panel2">
      <p class="m">Panel 2 content</p>
    </k-accordion-panel>
    <k-accordion-header for-panel="panel3">Panel 3</k-accordion-header>
    <k-accordion-panel name="panel3">
      <p class="m">Panel 3 content</p>
    </k-accordion-panel>
    </k-accordion>

Panel 1

Panel 1 content

Panel 2

Panel 2 content

Panel 3

Panel 3 content

### Default Open Panel

You can have a panel open by default by setting the `active` attribute to `true` on both the header and the panel.

    <k-accordion>
      <k-accordion-header for-panel="panel1" active="true">Panel 1</k-accordion-header>
      <k-accordion-panel name="panel1" active="true">
        <p class="m">Panel 1 content</p>
      </k-accordion-panel>
      <k-accordion-header for-panel="panel2">Panel 2</k-accordion-header>
      <k-accordion-panel name="panel2">
        <p class="m">Panel 2 content</p>
      </k-accordion-panel>
      <k-accordion-header for-panel="panel3">Panel 3</k-accordion-header>
      <k-accordion-panel name="panel3">
        <p class="m">Panel 3 content</p>
      </k-accordion-panel>
    </k-accordion>

Panel 1

Panel 1 content

Panel 2

Panel 2 content

Panel 3

Panel 3 content

## JavaScript Reference

### Constructor

###### Extends Component

##### `new Accordion()`

### Requirements

- utils/element.js

### Attributes

##### `forPanel: string`

Specifies the panel associated with the header.

##### `active: boolean`

Indicates whether the panel or header is active.

##### `transitioning: boolean`

Indicates whether the panel is in the process of transitioning.

### Properties

##### `activeHeader: HTMLElement`

Returns the currently active header element.

##### `activePanel: HTMLElement`

Returns the currently active panel element.

### Methods

##### `getHeader(panelName: string): HTMLElement`

Returns the header element associated with the specified panel name.

##### `getPanel(panelName: string): HTMLElement`

Returns the panel element associated with the specified panel name.

##### `openPanel(panelName: string): void`

Opens the panel associated with the specified panel name.

##### `closePanel(panelName: string): void`

Closes the panel associated with the specified panel name.

##### `togglePanel(panelName: string): void`

Toggles the panel associated with the specified panel name.