Table of Contents
Examples
Basic UsageDefault Open Panel
JavaScript Reference
ConstructorRequirements
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 content
Panel 2 content
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 content
Panel 2 content
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.