PineUiPhoenix.Accordion (Pine UI v0.1.3)

View Source

Provides accordion components for expandable/collapsible content sections.

The Accordion module offers two main variants:

  • basic/1 - Standard accordion component with single panel
  • group/1 - Group of related accordion panels where only one can be open at a time

Summary

Functions

Renders a basic accordion component.

Renders an accordion group with multiple accordion panels.

Functions

basic(assigns)

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)

group(assigns)

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)