Table of Contents
Description
A widget that allows a single panel of content to be opened and closed.
<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
You can have a panel open by default by adding the active attribute to both the header and the
<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
Add the multiple attribute to k-accordion to allow more than one panel to be open at a
time.
<k-accordion multiple>
<k-accordion-header for-panel="panel1" active>Panel 1</k-accordion-header>
<k-accordion-panel name="panel1" active>
<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
Add the persistent-id attribute to k-accordion to save and restore open panels across
page reloads. The state is stored in localStorage (if available) using the provided ID.
<k-accordion persistent-id="demo-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
Accordion
Properties
multiple: boolean — If present, allows multiple panels to be open.
Methods
getHeader(panelName): HTMLElement | nullgetPanel(panelName): HTMLElement | nullopenPanel(panelName): voidclosePanel(panelName): voidtogglePanel(panelName): void
Lifecycle
- State is restored in
updated() when persistentId changes.
Properties
forPanel: string — The panel name this header controls.active: boolean — Whether this header is active.accordion: Accordion | null (read only) — Parent accordion.
Event Handlers
- Click: toggles associated panel.
AccordionPanel
Properties
name: string — Unique panel identifier.active: boolean — Whether this panel is open.transitioning: boolean — Whether this panel is animating.
Methods
accordion: Accordion | null (getter) — Returns parent accordion.
openpanel
Fired when a panel is opened. The event detail contains { panelName }.
closepanel
Fired when a panel is closed. The event detail contains { panelName }.
togglepanel
Fired when a panel is toggled. The event detail contains { panelName }.
Kempo UI