More from Henry Kim

RSS

Collapse/expand UI with Stimulus that survives Turbo swaps

13942 views

0 comments

                  <div data-controller="disclosure">
  <button type="button" data-action="disclosure#toggle" aria-expanded="false" class="font-medium">
    Advanced
  </button>
  <div data-disclosure-target="panel" class="mt-2 hidden">
    <%= render 'advanced_filters' %>
  </div>
</div>

                  import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["panel"]

  toggle(event) {
    const expanded = event.currentTarget.getAttribute("aria-expanded") === "true"
    event.currentTarget.setAttribute("aria-expanded", (!expanded).toString())
    this.panelTarget.classList.toggle("hidden", expanded)
  }
}

Simple disclosure components are everywhere: FAQ, details panels, advanced filters. I keep them as progressive enhancement: the HTML is valid and readable, and Stimulus adds toggling behavior. The controller toggles a hidden class and updates aria-expanded so assistive tech stays accurate. In Turbo apps, this controller reconnects after frame replacements automatically, which means you can safely render collapsible partials via Turbo Streams. I also prefer using data-controller on a wrapper rather than on individual buttons; it’s easier to reuse. If state needs to persist across navigation, consider data-turbo-permanent or storing state in the URL, but for most collapses, local state is fine.

Henry Kim

More from Henry Kim

Collapse/expand UI with Stimulus that survives Turbo swaps

0 Comments

More from Henry Kim