Accordion

Renders an accordion element

Is it accessible?

›

Yes. It adheres to the WAI-ARIA design pattern.

render Accordion.new do |accordion|
  accordion.trigger { "Is it accessible?" }
  accordion.content { "Yes. It adheres to the WAI-ARIA design pattern." }
end

Installation

Add the component to your project

Manually

Copy and paste the following code into your project

# frozen_string_literal: true

class Components::Accordion < Components::Essence
  BASE = "group py-4"
  TRIGGER_BASE = "cursor-pointer list-none flex items-center justify-between text-base font-medium"
  CONTENT_BASE = "py-2 transform transition-all duration-500 not-open:-mt-4 opacity-0 group-open:opacity-100 group-open:mt-0 text-sm"
  CHEVRON_BASE = "transform transition-all duration-300 rotate-90 group-open:-rotate-90 text-lg text-gray-700"

  attr_reader :attributes

  def initialize(**attributes)
    super(**attributes)
  end

  def view_template(&)
    details(class: "w-full group py-4", &) if block_given?
  end

  def trigger(**tattributes, &)
    summary(class: merge_classes(TRIGGER_BASE, tattributes[:class])) do
      p(class: "inline", &)
      span(class: CHEVRON_BASE) { "›" }
    end
  end

  def content(**cattributes, &)
    p(class: merge_classes(CONTENT_BASE, cattributes[:class]), &)
  end

  private

  def initialize_merged_classes = merge_classes([ BASE, @attributes[:class] ])
end