Accordion

When you want to say a lot but not all at once

Includes a Ruby component and corresponding Rails helper

Ruby

Includes a Stimulus controller

Stimulus

Example

Item 1

Item 2

<%= nk_accordion(class: "w-full max-w-md") do |a| %>
  <%= a.item do %>
    <%= a.trigger "Item 1" %>
    <%= a.content do %>
      <p>Content 1</p>
    <% end %>
  <% end %>
  <%= a.item do %>
    <%= a.trigger "Item 2" %>
    <%= a.content do %>
      <p>Content 2</p>
    <% end %>
  <% end %>
  <%= a.item do %>
    <%= a.trigger "Item 2" %>
    <%= a.content do %>
      <p>Content 3</p>
    <% end %>
  <% end %>
<% end %>

<%= nk_accordion do |a| %>
  <%= a.item do %>
    <%= a.trigger "Item 1" %>
    <%= a.content do %>
      <p>Content</p>
    <% end %>
  <% end %>
  <%= a.item do %>
    <%= a.trigger "Item 2" %>
    <%= a.content do %>
      <p>Content</p>
    <% end %>
  <% end %>
<% end %>

Install

Set up Nitro Kit then

bin/rails generate nitro_kit:add accordion

Files generated

Usage

`nk_accordion(**attrs) { \|accordion\| ... }`
Property	Default	Description
`**attrs`		HTML attributes for `<div>` element

`accordion.item(**attrs) { ... }`
Property	Default	Description
`**attrs`		HTML attributes for `<div>` element

`accordion.trigger(text = nil, **attrs) { ... }`
Property	Default	Description
`text`	`nil`	Plain text content
`**attrs`		HTML attributes for `<button>` element

`accordion.content(text = nil, **attrs) { ... }`
Property	Default	Description
`text`	`nil`	Plain text content
`**attrs`		HTML attributes for `<div>` element