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 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 content
Panel 2 content
Panel 3 content
Multiple Panels Mode
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 content
Panel 2 content
Panel 3 content
Persistent State Example
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 content
Panel 2 content
Panel 3 content
JavaScript Reference
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()whenpersistentIdchanges.
AccordionHeader
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.
Events
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 }.