Accordion - Rails UI Components

What is this?

This is an accordion component for collapsible content.

Usage

<%= ui.accordion name: "faq" do %>
  <%= ui.accordion_summary "Question 1" %>
  <%= ui.accordion_body do %>
    <p>Answer to question 1.</p>
  <% end %>
<% end %>

<%= ui.accordion name: "faq" do %>
  <%= ui.accordion_summary "Question 2" %>
  <%= ui.accordion_body do %>
    <p>Answer to question 2.</p>
  <% end %>
<% end %>

Props

Prop	Type	Default	Description
`name`	`String`	`nil`	Name attribute for grouping accordions. Accordions with the same name will close when another opens (exclusive behavior).
`open`	`Boolean`	`false`	Whether the accordion is initially expanded.

Also accepts any HTML attributes via **options (e.g., id:, data:, aria:). class: is also supported for custom styling.

SubcomponentsUse subcomponents below or any HTML.

Name	Helper	Description
`accordion_summary`	`ui.accordion_summary`	The clickable header that toggles the accordion open/closed.
`accordion_body`	`ui.accordion_body`	The collapsible content area of the accordion.

Examples

Accordion group

First Item

Content for the first accordion item.

Second Item

Content for the second accordion item.

Third Item

Content for the third accordion item.

<div class="divide-y divide-border">
  <%= ui.accordion name: "tech-specs", open: true do %>
    <%= ui.accordion_summary "First Item" %>
    <%= ui.accordion_body do %>
      <p>Content for the first accordion item.</p>
    <% end %>
  <% end %>

  <%= ui.accordion name: "tech-specs" do %>
    <%= ui.accordion_summary "Second Item" %>
    <%= ui.accordion_body do %>
      <p>Content for the second accordion item.</p>
    <% end %>
  <% end %>

  <%= ui.accordion name: "tech-specs" do %>
    <%= ui.accordion_summary "Third Item" %>
    <%= ui.accordion_body do %>
      <p>Content for the third accordion item.</p>
    <% end %>
  <% end %>
</div>

Independent accordions

Standalone Accordion

This accordion operates independently without a name group.

<%= ui.accordion do %>
  <%= ui.accordion_summary "Standalone Accordion" %>
  <%= ui.accordion_body do %>
    <p>This accordion operates independently without a name group.</p>
  <% end %>
<% end %>