RubyAccordionWithPlusMinusIcons

Info Generate Packages

This code defines a Ruby class named `AccordionWithPlusMinusIconComponent` that inherits from `ApplicationComponent`. Within the class, there's a method named `template` that dynamically generates an accordion component with plus and minus icons for collapsing and expanding content. This accordion is comprised of three sections, each containing a radio button input and a collapsible content area. The first section is initially expanded (as indicated by the `checked` attribute on its radio button), while the other two sections are initially collapsed. Each section's title prompts the user to click to open the respective section and close the others, indicating that only one section can be expanded at a time. The content of all sections is the same, with a paragraph containing the text "hello". The accordion uses classes for styling, such as `collapse`, `collapse-plus`, `bg-base-200`, `collapse-title`, and `collapse-content`, suggesting it may be part of a frontend framework like Tailwind CSS or a similar system.

# frozen_string_literal: true

class AccordionWithPlusMinusIconComponent < ApplicationComponent
  def template
    div(class: "collapse collapse-plus bg-base-200") do
      input(type: "radio", name: "my-accordion-3", checked: "checked")
      div(class: "collapse-title text-xl font-medium") { "Click to open this one and close others" }
      div(class: "collapse-content") { p { "hello" } }
    end
    div(class: "collapse collapse-plus bg-base-200") do
      input(type: "radio", name: "my-accordion-3")
      div(class: "collapse-title text-xl font-medium") { "Click to open this one and close others" }
      div(class: "collapse-content") { p { "hello" } }
    end
    div(class: "collapse collapse-plus bg-base-200") do
      input(type: "radio", name: "my-accordion-3")
      div(class: "collapse-title text-xl font-medium") { "Click to open this one and close others" }
      div(class: "collapse-content") { p { "hello" } }
    end
  end
end

Try a prompt