AccordionJoinTogetherComponent
The code defines a Ruby class named AccordionJoinTogetherComponent that inherits from ApplicationComponent. This class generates a template for an accordion UI component using a declarative style. The accordion consists of three collapsible sections, each controlled by a radio button. When a radio button is selected, its corresponding section expands to show content, while the others collapse. The first section is set to be expanded by default as indicated by the checked attribute on its radio button. Each section has a title indicating to click it for opening, and contains a simple paragraph with the text "hello" (with a capitalization difference in the last section). The styling classes suggest the use of a CSS framework, possibly Tailwind CSS, to handle the appearance and animations of the accordion.
# frozen_string_literal: true
class AccordionJoinTogetherComponent < ApplicationComponent
def template
div(class: "join join-vertical w-full") do
div(class: "collapse collapse-arrow join-item border border-base-300") do
input(type: "radio", name: "my-accordion-4", checked: "checked")
div(class: "collapse-title text-xl font-medium") { "Click to open this one and close others" }
div(class: "collapse-content") do
p { "hello" }
end
end
div(class: "collapse collapse-arrow join-item border border-base-300") do
input(type: "radio", name: "my-accordion-4")
div(class: "collapse-title text-xl font-medium") { "Click to open this one and close others" }
div(class: "collapse-content") do
p { "hello" }
end
end
div(class: "collapse collapse-arrow join-item border border-base-300") do
input(type: "radio", name: "my-accordion-4")
div(class: "collapse-title text-xl font-medium") { "Click to open this one and close others" }
div(class: "collapse-content") do
p { "Hello" }
end
end
end
end
end