Accordion UI with Radio Inputs

Info Generate Packages

This Ruby code defines a class named AccordionUsingRadioInputsComponent that inherits from ApplicationComponent. The class contains a method named template, which dynamically generates HTML content for a web interface. Specifically, the method builds an accordion UI component using radio inputs to allow users to expand one section while automatically collapsing others. The accordion is comprised of three sections, each with a unique radio input sharing the same name attribute, ensuring that only one section can be expanded at a time. The first section is initially expanded (indicated by the checked attribute on its radio input), and each section contains a title and content area with sample text. The UI component utilizes CSS classes such as "gap-2", "collapse", "bg-base-200", "collapse-title", and "collapse-content" for styling.

# frozen_string_literal: true

class AccordionUsingRadioInputsComponent < ApplicationComponent
  def template
    div(class: "gap-2") do
      div(class: "collapse bg-base-200") do
        input(type: "radio", name: "my-accordion-1", 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 bg-base-200") do
        input(type: "radio", name: "my-accordion-1")
        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 bg-base-200") do
        input(type: "radio", name: "my-accordion-1")
        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

Try a prompt