PineUiPhoenix.Accordion (Pine UI v0.1.3)
View SourceProvides accordion components for expandable/collapsible content sections.
The Accordion module offers two main variants:
Summary
Functions
Renders a basic accordion component.
Renders an accordion group with multiple accordion panels.
Functions
Renders a basic accordion component.
This component creates a collapsible section that can be toggled open/closed. It uses AlpineJS for the toggle functionality.
Examples
<.basic title="Frequently Asked Questions">
<p>This content can be expanded or collapsed.</p>
</.basic>
<.basic title="Section Title" subtitle="Additional details" open={true}>
<div class="space-y-4">
<p>Initially expanded content.</p>
<p>Multiple paragraphs can be included.</p>
</div>
</.basic>
Options
:title
- Accordion panel header text (required):subtitle
- Optional subheading text below the title (optional):open
- Whether the accordion is expanded initially (optional, defaults to false):class
- Additional CSS classes for the accordion container (optional):header_class
- Additional CSS classes for the header section (optional):content_class
- Additional CSS classes for the content section (optional):icon
- Custom icon element to replace default chevron (optional)
Renders an accordion group with multiple accordion panels.
This component creates a group of related accordion panels where only one panel can be expanded at a time.
Examples
<.group>
<:panel title="Section 1">
<p>Content for section 1</p>
</:panel>
<:panel title="Section 2">
<p>Content for section 2</p>
</:panel>
<:panel title="Section 3" active={true}>
<p>This section is open by default</p>
</:panel>
</.group>
Options
:class
- Additional CSS classes for the accordion group container (optional):panel_class
- Additional CSS classes applied to each panel (optional):header_class
- Additional CSS classes for each panel header (optional):content_class
- Additional CSS classes for each panel content (optional):panel
- Panel slots with the following attributes::title
- Panel header text (required):subtitle
- Optional subheading text below the title (optional):active
- Whether this panel is expanded initially (optional, default to false):icon
- Custom icon element to replace default chevron (optional)