Accordions

Simple, clean accordion components with Hotwire integration

FAQ Accordion

Simple FAQ with dynamic content loading

Getting started is easy! Simply install the gem, add it to your Gemfile, and run the generator to set up the components in your Rails application.

Absolutely! All components are built with Tailwind CSS and can be easily customized by modifying the classes or extending the base styles.

Yes! TailView is designed to work seamlessly with Hotwire, Turbo Frames, and Stimulus controllers for dynamic interactions.

TailView supports all modern browsers including Chrome, Firefox, Safari, and Edge. Internet Explorer is not supported.

HTML + Stimulus

<div data-controller="accordion" data-accordion-allow-multiple-value="false">
  <div data-accordion-target="item" data-open="true">
    <button data-action="click->accordion#toggle">
      <span>Question</span>
      <svg data-accordion-target="icon">...</svg>
    </button>
    <div data-accordion-target="content">
      Answer content here
    </div>
  </div>
</div>

Basic Accordion

Simple collapsible content sections

TailView is a comprehensive UI component library built with Tailwind CSS. It provides beautiful, accessible components for Rails applications.

Simply add the gem to your Gemfile and run the generator to set up the components.

Yes! All components are built with Tailwind CSS and can be easily customized.

HTML + Stimulus

<div data-controller="accordion">
  <div data-accordion-target="item" data-open="true">
    <button data-action="click->accordion#toggle">
      <span>What is TailView?</span>
      <svg data-accordion-target="icon">...</svg>
    </button>
    <div data-accordion-target="content">
      Content goes here...
    </div>
  </div>
</div>

Multiple Open Accordion

Allow multiple items to be open simultaneously

This accordion allows multiple items to be open simultaneously.

Use Tab to navigate between accordion items, Enter or Space to toggle them.

Clean, simple code that's easy to understand and maintain.

JavaScript

// Simple Stimulus Controller
toggle(event) {
  const item = event.target.closest('[data-accordion-target="item"]')
  const content = item.querySelector('[data-accordion-target="content"]')
  const icon = item.querySelector('[data-accordion-target="icon"]')
  
  const isOpen = content.style.display === "block"
  
  if (isOpen) {
    content.style.display = "none"
    icon?.classList.remove("rotate-180")
  } else {
    if (!this.allowMultipleValue) {
      this.closeAllItems()
    }
    content.style.display = "block"
    icon?.classList.add("rotate-180")
  }
}