Accordion

Table of Contents

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

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.