Getting Started
Components

Accordion

Description

Accordion allows collapsible panels, facilitating the creation of stacked content that can expand or collapse with user interaction, typically used for organizing and presenting information in a space-efficient manner.

FREE
This component is available for free. It implements the Bootstrap Accordion component. See the installation instructions below for more details.

Arguments

Name Default Type Description
flush Boolean Remove the outer border and corners if rendered edge to edge in a parent container
html_attributes {} Hash Any attributes for the used html wrapper tag

Examples

Default 

<%= render Railsboot::AccordionComponent.new do |accordion| %>
  <% accordion.with_item(id: "item-1") do |item| %>
    <% item.with_header { "Header 1" } %>
    <% item.with_body { "Body 1" } %>
  <% end %>
  <% accordion.with_item(id: "item-2") do |item| %>
    <% item.with_header { "Header 2" } %>
    <% item.with_body { "Body 2" } %>
  <% end %>
<% end %>

<div class="accordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#item-1" aria-expanded="false" aria-controls="item-1">Header 1</button>
    </h2>
    <div id="item-1" class="accordion-collapse collapse">
      <div class="accordion-body">
        Body 1
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#item-2" aria-expanded="false" aria-controls="item-2">Header 2</button>
    </h2>
    <div id="item-2" class="accordion-collapse collapse">
      <div class="accordion-body">
        Body 2
      </div>
    </div>
  </div>
</div>

Expanded 

<%= render Railsboot::AccordionComponent.new do |accordion| %>
  <% accordion.with_item(id: "expanded-item-1", expanded: true) do |item| %>
    <% item.with_header { "Header 1" } %>
    <% item.with_body { "Body 1" } %>
  <% end %>
  <% accordion.with_item(id: "expanded-item-2") do |item| %>
    <% item.with_header { "Header 2" } %>
    <% item.with_body { "Body 2" } %>
  <% end %>
<% end %>

<div class="accordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#expanded-item-1" aria-expanded="true" aria-controls="expanded-item-1">Header 1</button>
    </h2>
    <div id="expanded-item-1" class="accordion-collapse collapse show">
      <div class="accordion-body">
        Body 1
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#expanded-item-2" aria-expanded="false" aria-controls="expanded-item-2">Header 2</button>
    </h2>
    <div id="expanded-item-2" class="accordion-collapse collapse">
      <div class="accordion-body">
        Body 2
      </div>
    </div>
  </div>
</div>

Flush 

<%= render Railsboot::AccordionComponent.new(flush: true) do |accordion| %>
  <% accordion.with_item(id: "flush-item-1") do |item| %>
    <% item.with_header { "Header 1" } %>
    <% item.with_body { "Body 1" } %>
  <% end %>
  <% accordion.with_item(id: "flush-item-2") do |item| %>
    <% item.with_header { "Header 2" } %>
    <% item.with_body { "Body 2" } %>
  <% end %>
<% end %>

<div class="accordion accordion-flush">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-item-1" aria-expanded="false" aria-controls="flush-item-1">Header 1</button>
    </h2>
    <div id="flush-item-1" class="accordion-collapse collapse">
      <div class="accordion-body">
        Body 1
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-item-2" aria-expanded="false" aria-controls="flush-item-2">Header 2</button>
    </h2>
    <div id="flush-item-2" class="accordion-collapse collapse">
      <div class="accordion-body">
        Body 2
      </div>
    </div>
  </div>
</div>

Slots

items Railsboot::Accordion::ItemComponent Allows many

Items represent the individual section of the accordion. Each item component defines a header and a body component, giving you methods like #with_header and #with_body for any arbitrary content you'd like to add.

Name Default Type Description
id String The dom id of the item section
expanded Boolean Initial open/close of the accordion item
parent_id String Parent ID of the item
html_attributes {} Hash Any attributes for the used html wrapper tag

Installation

Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:

  • A parent component class (app/components/railsboot/component.rb) of which all components inherit from.
  • A base component class (app/components/railsboot/base_component.rb) which is used for rendering internally.
  • The desired component itself (app/components/railsboot/accordion_component.rb).
  • A view template (app/components/railsboot/accordion_component.html.erb) for the component unless it's rendered inline.
  • Any other dependent components such as Slots (just if the component needs those)
  • Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
  • A test file for the components (test/components/railsboot/accordion_component_test.rb) including potential slot or dependency tests.

For more information please refer to the installation section.

Download

Download the component and its related files (e.g. templates, assets, slots etc.), unpackage the zip file and adapt the things you need.

Alert