Collapsible Shared Partial

Don't forget the Stimulus controller!

The shared partial still requires the collapsible_controller.js Stimulus controller to be installed. Copy the controller from the Installation section on this page.

1. Copy shared partial files

Download all 1 shared partial files as a ZIP file.

Download all files (ZIP)

After downloading, unzip and copy the collapsible/ folder to your app/views/shared/components/ directory.

Copy these files to your app/views/shared/components/collapsible/ directory:

Include :dark classes

<% title = local_assigns.fetch(:title, "") %>
<% content = local_assigns.fetch(:content, "") %>
<% default_open = local_assigns.fetch(:default_open, false) %>
<% icon = local_assigns.fetch(:icon, "chevron") %>
<% animated = local_assigns.fetch(:animated, true) %>
<% disabled = local_assigns.fetch(:disabled, false) %>
<% classes = local_assigns[:classes] %>
<% trigger_classes = local_assigns[:trigger_classes] %>
<% content_classes = local_assigns[:content_classes] %>
<% visible_content = local_assigns.fetch(:visible_content, nil) %>
<% summary_content = local_assigns.fetch(:summary_content, nil) %>
<% summary_text = local_assigns.fetch(:summary_text, nil) %>

<% state = default_open ? "open" : "closed" %>

<% wrapper_classes = classes.presence || "w-[350px] space-y-2" %>
<% button_classes = ["relative flex items-center justify-center gap-1.5 rounded-lg bg-transparent p-1.5 -sm font-medium whitespace-nowrap text-neutral-800 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-50 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200", trigger_classes].compact.reject(&:empty?).join(" ") %>
<% content_layout_classes = content_classes.presence || "space-y-2" %>
<% content_area_classes = [content_layout_classes, "overflow-hidden", (animated ? "transition-all duration-300 ease-in-out" : nil)].compact.reject(&:empty?).join(" ") %>
<% collapsed_icon_style = "opacity: 0;" %>
<% expanded_icon_style = default_open ? "opacity: 1;" : "opacity: 0;" %>
<% content_style = default_open ? "max-height: none; opacity: 1;" : "max-height: 0; opacity: 0;" %>
<% resolved_visible_content = visible_content.presence || summary_content.presence || summary_text %>

<div class="<%= wrapper_classes %>" <%= tag.attributes(data: { controller: "collapsible", collapsible_open_value: default_open, collapsible_animated_value: animated, state: state }) unless disabled %>>
  <!-- Header with toggle button -->
  <div class="flex items-center justify-between space-x-4">
    <h4 class="text-sm font-semibold"><%= title %></h4>

    <% unless disabled %>
      <button type="button" class="<%= button_classes %>" data-action="click->collapsible#toggle">
        <!-- Collapsed state icon (visible by default) -->
        <% if icon.to_s == "arrows" %>
          <svg data-collapsible-target="collapsedIcon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="absolute size-4.5" style="<%= collapsed_icon_style %>">
            <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
              <polyline points="12.5 6.25 9 2.75 5.5 6.25"></polyline>
              <polyline points="12.5 11.75 9 15.25 5.5 11.75"></polyline>
            </g>
          </svg>

          <!-- Expanded state icon (hidden by default) -->
          <svg data-collapsible-target="expandedIcon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="size-4.5" style="<%= expanded_icon_style %>">
            <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
              <polyline points="5.5 3.5 9 7 12.5 3.5"></polyline>
              <polyline points="5.5 14.5 9 11 12.5 14.5"></polyline>
            </g>
          </svg>
        <% elsif icon.to_s == "plus_minus" %>
          <svg data-collapsible-target="collapsedIcon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="absolute size-4.5" style="<%= collapsed_icon_style %>">
            <g fill="currentColor">
              <path d="M14.75,9.75H3.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.75c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path>
              <path d="M9,15.5c-.414,0-.75-.336-.75-.75V3.25c0-.414,.336-.75,.75-.75s.75,.336,.75,.75V14.75c0,.414-.336,.75-.75,.75Z"></path>
            </g>
          </svg>

          <!-- Expanded state icon (hidden by default) -->
          <svg data-collapsible-target="expandedIcon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="size-4.5" style="<%= expanded_icon_style %>">
            <g fill="currentColor">
              <path d="M14.75,9.75H3.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.75c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path>
            </g>
          </svg>
        <% else %>
          <svg data-collapsible-target="collapsedIcon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="absolute size-4.5" style="<%= collapsed_icon_style %>">
            <g fill="currentColor">
              <path d="M8.99999 13.5C8.80799 13.5 8.61599 13.4271 8.46999 13.2801L2.21999 7.03005C1.92699 6.73705 1.92699 6.26202 2.21999 5.96902C2.51299 5.67602 2.98799 5.67602 3.28099 5.96902L9.00099 11.689L14.721 5.96902C15.014 5.67602 15.489 5.67602 15.782 5.96902C16.075 6.26202 16.075 6.73705 15.782 7.03005L9.53199 13.2801C9.38599 13.4261 9.19399 13.5 9.00199 13.5H8.99999Z"></path>
            </g>
          </svg>

          <!-- Expanded state icon (hidden by default) -->
          <svg data-collapsible-target="expandedIcon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="size-4.5" style="<%= expanded_icon_style %>">
            <g fill="currentColor">
              <path d="M9.00001 4.5C9.19201 4.5 9.38401 4.5729 9.53001 4.7199L15.78 10.9699C16.073 11.2629 16.073 11.738 15.78 12.031C15.487 12.324 15.012 12.324 14.719 12.031L8.99901 6.311L3.27901 12.031C2.98601 12.324 2.51101 12.324 2.21801 12.031C1.92501 11.738 1.92501 11.2629 2.21801 10.9699L8.46801 4.7199C8.61401 4.5739 8.80601 4.5 8.99801 4.5H9.00001Z"></path>
            </g>
          </svg>
        <% end %>

        <span class="sr-only">Toggle</span>
      </button>
    <% end %>
  </div>

  <% if resolved_visible_content.present? %>
    <!-- Always visible content -->
    <%= resolved_visible_content.respond_to?(:html_safe) ? resolved_visible_content.html_safe : resolved_visible_content.to_s %>
  <% end %>

  <!-- Collapsible content -->
  <div data-collapsible-target="content" data-state="<%= state %>" class="<%= content_area_classes %>" style="<%= content_style %>">
    <%= content.respond_to?(:html_safe) ? content.html_safe : content.to_s %>
  </div>
</div>

2. Usage example

Include :dark classes

<% collapsible_content = capture do %>
  <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-4 py-3 font-mono text-sm">hotwired/stimulus</div>
  <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-4 py-3 font-mono text-sm">hotwired/turbo-rails</div>
<% end %>

<% always_visible_content = capture do %>
  <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-4 py-3 font-mono text-sm">rails/rails</div>
<% end %>

<div class="flex w-fit justify-center">
  <%= render "shared/components/collapsible/collapsible",
    title: "Rails developer starred 3 repositories",
    icon: "arrows",
    visible_content: always_visible_content,
    content: collapsible_content %>
</div>

<% plus_minus_collapsible_content = capture do %>
  <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-4 py-3 font-mono text-sm">hotwired/stimulus</div>
  <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-4 py-3 font-mono text-sm">hotwired/turbo-rails</div>
<% end %>

<% plus_minus_visible_content = capture do %>
  <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-4 py-3 font-mono text-sm">rails/rails</div>
<% end %>

<div class="flex w-fit justify-center">
  <%= render "shared/components/collapsible/collapsible",
    title: "Rails developer starred 3 repositories",
    icon: "plus_minus",
    visible_content: plus_minus_visible_content,
    content: plus_minus_collapsible_content %>
</div>

Rendered usage example

Collapsible ViewComponent

Don't forget the Stimulus controller!

The ViewComponent still requires the collapsible_controller.js Stimulus controller to be installed. Copy the controller from the Installation section on this page.

1. Ensure the gem is installed

gem "view_component", "~> 4.2"

2. Copy component files

Download all 2 component files as a ZIP file.

Download all files (ZIP)

After downloading, unzip and copy the collapsible/ folder to your app/components/ directory.

Copy these files to your app/components/collapsible/ directory:

Include :dark classes

<%= render "shared/components/collapsible/collapsible",
  title: @title,
  default_open: @default_open,
  icon: @icon,
  animated: @animated,
  disabled: @disabled,
  classes: @classes,
  trigger_classes: @trigger_classes,
  content_classes: @content_classes,
  visible_content: @visible_content,
  content: (content if content?) %>

Include :dark classes

# frozen_string_literal: true

module Collapsible
  class Component < ViewComponent::Base
    ICONS = %i[chevron plus_minus arrows].freeze

    # @param title [String] The collapsible header/trigger text
    # @param default_open [Boolean] Whether the collapsible starts expanded
    # @param icon [Symbol, String] Icon type: :chevron, :plus_minus, :arrows
    # @param animated [Boolean] Whether to animate the open/close transition
    # @param disabled [Boolean] Whether the collapsible is disabled
    # @param classes [String, nil] Additional CSS classes for the wrapper
    # @param trigger_classes [String, nil] Additional CSS classes for the trigger button
    # @param content_classes [String, nil] Additional CSS classes for the collapsible content area
    # @param visible_content [String, nil] Optional always-visible content shown before collapsible content
    # @param summary_content [String, nil] Backward-compatible alias for visible_content
    # @param summary_text [String, nil] Backward-compatible alias for visible_content
    def initialize(
      title:,
      default_open: false,
      icon: :chevron,
      animated: true,
      disabled: false,
      classes: nil,
      trigger_classes: nil,
      content_classes: nil,
      visible_content: nil,
      summary_content: nil,
      summary_text: nil
    )
      super()
      @title = title
      @default_open = default_open
      @icon = normalize_icon(icon)
      @animated = animated
      @disabled = disabled
      @classes = classes
      @trigger_classes = trigger_classes
      @content_classes = content_classes
      @visible_content = visible_content.presence || summary_content.presence || summary_text
    end

    private

    def normalize_icon(icon)
      normalized = icon.to_s.tr("-", "_").to_sym
      ICONS.include?(normalized) ? normalized : :chevron
    end
  end
end

3. Usage example

Include :dark classes

<% always_visible_content = capture do %>
  <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-4 py-3 font-mono text-sm">rails/rails</div>
<% end %>

<div class="flex w-fit justify-center">
  <%= render Collapsible::Component.new(
    title: "Rails developer starred 3 repositories",
    icon: :arrows,
    visible_content: always_visible_content
  ) do %>
    <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-4 py-3 font-mono text-sm">hotwired/stimulus</div>
    <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-4 py-3 font-mono text-sm">hotwired/turbo-rails</div>
  <% end %>
</div>

<% plus_minus_visible_content = capture do %>
  <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-4 py-3 font-mono text-sm">rails/rails</div>
<% end %>

<div class="flex w-fit justify-center">
  <%= render Collapsible::Component.new(
    title: "Rails developer starred 3 repositories",
    icon: :plus_minus,
    visible_content: plus_minus_visible_content
  ) do %>
    <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-4 py-3 font-mono text-sm">hotwired/stimulus</div>
    <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-4 py-3 font-mono text-sm">hotwired/turbo-rails</div>
  <% end %>
</div>

Rendered usage example

Collapsible Rails Components

Show and hide content sections with smooth animations. Perfect for expanding cards, showing additional details, or creating interactive content areas that users can toggle on demand.

Installation

1. Stimulus Controller Setup

Start by adding the following controller to your project:

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["content", "collapsedIcon", "expandedIcon"];
  static values = {
    open: Boolean,
    animated: { type: Boolean, default: true },
  };

  connect() {
    this.isOpen = this.openValue;
    this.updateDisplay({ animate: false });
  }

  toggle() {
    this.isOpen = !this.isOpen;
    this.updateDisplay();
  }

  updateDisplay({ animate = true } = {}) {
    if (!this.hasContentTarget) return;

    const shouldAnimate =
      animate && this.animatedValue && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const content = this.contentTarget;

    if (this.isOpen) {
      content.style.maxHeight = shouldAnimate ? content.scrollHeight + "px" : "none";
      content.style.opacity = "1";
      content.setAttribute("data-state", "open");
      this.element.setAttribute("data-state", "open");
    } else {
      content.style.maxHeight = "0";
      content.style.opacity = "0";
      content.setAttribute("data-state", "closed");
      this.element.setAttribute("data-state", "closed");
    }

    this.updateIconDisplay();
    this.openValue = this.isOpen;
  }

  updateIconDisplay() {
    if (!this.hasCollapsedIconTarget || !this.hasExpandedIconTarget) return;

    const collapsedIcon = this.collapsedIconTarget;
    const expandedIcon = this.expandedIconTarget;
    collapsedIcon.style.transition = "none";
    expandedIcon.style.transition = "none";
    collapsedIcon.style.filter = "";
    expandedIcon.style.filter = "";

    if (this.isOpen) {
      collapsedIcon.style.opacity = "0";
      expandedIcon.style.opacity = "1";
    } else {
      collapsedIcon.style.opacity = "1";
      expandedIcon.style.opacity = "0";
    }
  }
}

Examples

Basic Collapsible

A simple collapsible component that shows/hides content with smooth animations. Features dual icons that automatically swap between collapsed and expanded states.

Rails developer starred 3 repositories

rails/rails

hotwired/stimulus

hotwired/turbo-rails

Include :dark classes

<div class="flex w-fit justify-center">
  <div data-controller="collapsible" data-collapsible-open-value="false" data-state="closed" class="w-[350px] space-y-2">
    <!-- Header with toggle button -->
    <div class="flex items-center justify-between space-x-4">
      <h4 class="text-sm font-semibold">Rails developer starred 3 repositories</h4>

      <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-transparent p-1.5 -sm font-medium whitespace-nowrap text-neutral-800 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-50 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200" data-action="click->collapsible#toggle">
        <!-- Collapsed state icon (visible by default) -->

        <svg data-collapsible-target="collapsedIcon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="absolute size-4.5" style="opacity: 0;">
          <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
            <polyline points="12.5 6.25 9 2.75 5.5 6.25"></polyline>
            <polyline points="12.5 11.75 9 15.25 5.5 11.75"></polyline>
          </g>
        </svg>

        <!-- Expanded state icon (hidden by default) -->
        <svg data-collapsible-target="expandedIcon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="size-4.5" style="opacity: 0;">
          <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor">
            <polyline points="5.5 3.5 9 7 12.5 3.5"></polyline>
            <polyline points="5.5 14.5 9 11 12.5 14.5"></polyline>
          </g>
        </svg>

        <span class="sr-only">Toggle</span>
      </button>
    </div>

    <!-- Always visible content -->
    <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-4 py-3 font-mono text-sm">rails/rails</div>

    <!-- Collapsible content -->
    <div data-collapsible-target="content" data-state="closed" class="space-y-2 overflow-hidden transition-all duration-300 ease-in-out" style="max-height: 0; opacity: 0;">
      <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-4 py-3 font-mono text-sm">hotwired/stimulus</div>
      <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-4 py-3 font-mono text-sm">hotwired/turbo-rails</div>
    </div>
  </div>
</div>

Collapsible with plus/minus icon

The same collapsible structure using plus/minus toggle icons.

Rails developer starred 3 repositories

rails/rails

hotwired/stimulus

hotwired/turbo-rails

Include :dark classes

<div class="flex w-fit justify-center">
  <div data-controller="collapsible" data-collapsible-open-value="false" data-state="closed" class="w-[350px] space-y-2">
    <!-- Header with toggle button -->
    <div class="flex items-center justify-between space-x-4">
      <h4 class="text-sm font-semibold">Rails developer starred 3 repositories</h4>

      <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-transparent p-1.5 -sm font-medium whitespace-nowrap text-neutral-800 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-50 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200" data-action="click->collapsible#toggle">
        <!-- Collapsed state icon (visible by default) -->
        <svg data-collapsible-target="collapsedIcon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="absolute size-4.5" style="opacity: 0;">
          <g fill="currentColor">
            <path d="M14.75,9.75H3.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.75c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path>
            <path d="M9,15.5c-.414,0-.75-.336-.75-.75V3.25c0-.414,.336-.75,.75-.75s.75,.336,.75,.75V14.75c0,.414-.336,.75-.75,.75Z"></path>
          </g>
        </svg>

        <!-- Expanded state icon (hidden by default) -->
        <svg data-collapsible-target="expandedIcon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="size-4.5" style="opacity: 0;">
          <g fill="currentColor">
            <path d="M14.75,9.75H3.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.75c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path>
          </g>
        </svg>

        <span class="sr-only">Toggle</span>
      </button>
    </div>

    <!-- Always visible content -->
    <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-4 py-3 font-mono text-sm">rails/rails</div>

    <!-- Collapsible content -->
    <div data-collapsible-target="content" data-state="closed" class="space-y-2 overflow-hidden transition-all duration-300 ease-in-out" style="max-height: 0; opacity: 0;">
      <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-4 py-3 font-mono text-sm">hotwired/stimulus</div>
      <div class="rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-700/50 px-4 py-3 font-mono text-sm">hotwired/turbo-rails</div>
    </div>
  </div>
</div>

Configuration

The collapsible component is powered by a Stimulus controller that provides smooth animations and flexible configuration options for creating interactive content sections.

Controller Setup

Basic collapsible structure with required data attributes:

<div data-controller="collapsible" data-collapsible-open-value="false" data-collapsible-animated-value="true">
  <div class="flex items-center justify-between">
    <h4>Content Title</h4>
    <button data-action="click->collapsible#toggle">
      <svg data-collapsible-target="collapsedIcon"><!-- Icon for collapsed state --></svg>
      <svg data-collapsible-target="expandedIcon"><!-- Icon for expanded state --></svg>
    </button>
  </div>

  <div data-collapsible-target="content" class="overflow-hidden transition-all duration-300">
    <!-- Collapsible content goes here -->
  </div>
</div>

Configuration Values

Value	Description	Type	Default
open	Controls the initial open/closed state when the component loads	`boolean`	`false`
animated	Enables/disables content transitions	`boolean`	`true`

Targets

Target	Description	Required
content	The collapsible content area that shows/hides with smooth animations	Required
collapsedIcon	Icon element displayed when content is collapsed	Optional
expandedIcon	Icon element displayed when content is expanded	Optional

Actions

Action	Description	Usage
toggle	Toggles the collapsible content between open and closed states	`click->collapsible#toggle`

Animation Features

Smooth Height Transitions: Content expands and collapses with smooth max-height animations
Opacity Fading: Content fades in/out during transitions for polished visual effects
Icon Switching: Automatic instant switching between collapsed and expanded icon states
State Attributes: Automatic data-state attribute management for custom styling

Styling with CSS

The component automatically sets data-state attributes that you can use for custom styling:

Container: data-state="open" or data-state="closed"
Content: data-state="open" or data-state="closed"

Usage Tips

CSS Transitions: Add transition-all duration-300 to the content target for smooth animations
Overflow Hidden: Use overflow-hidden on the content target to prevent content from showing during animations
Icon Positioning: Use position: absolute on the overlaid icon target to keep both icon states aligned
Initial State: Set the initial data-collapsible-open-value based on your design needs
Disable Motion: Set data-collapsible-animated-value="false" to disable content transitions