アコーディオン

import {Controller} from "@hotwired/stimulus"

// Connects to data-controller="accordion"
export default class extends Controller {
  static targets = ["revealable", "trigger"]

  connect() {
    this.#syncContentA11y()
  }

  toggle() {
    this.triggerTarget.ariaExpanded = this.#isExpanded() ? "false" : "true"
    this.#toggleRevealableTargets()
    this.#syncContentA11y()
  }

  #isExpanded() {
    return this.triggerTarget.ariaExpanded == "true"
  }

  #syncContentA11y() {
    this.revealableTargets.forEach(target => {
      if (this.#isExpanded()) {
        target.ariaHidden = "false"
        target.inert = false
      } else {
        target.ariaHidden = "true"
        target.inert = true
      }
    })
  }

  #toggleRevealableTargets() {
    this.revealableTargets.forEach(target => {
      /*
      * CSS transitions cannot transition if the destination height
      * is not explicitly specified (like height: auto).
      * Hence, we get the scrollHeight with JavaScript and
      * explicitly set that value as the destination height.
      * */
      if (parseInt(target.style.height)) {
        target.style.height = 0
      } else {
        const scrollHeight = target.scrollHeight
        target.style.height = scrollHeight + "px"
      }
    })
  }
}

  <div>
    <h2 class="text-4xl pb-8 border-b border-gray-300">
      Frequently Asked Questions
    </h2>
    <%= render 'accordion_row',
               title: "携帯プランの変更はどうすればいいですか？" do %>
      携帯プランの変更は、店頭・公式アプリ・ウェブサイトから可能です。アプリやウェブでは24時間対応しており、数分で完了します。
    <% end %>
    <%= render 'accordion_row',
               title: "機種変更時のデータ移行はできますか？" do %>
      機種変更時、データ移行はスタッフがサポートします。また、クラウドサービスやアプリを使えば簡単に自分で移行も可能です。
    <% end %>
    <%= render 'accordion_row',
               title: "解約の手続き方法を教えてください。" do %>
      解約手続きは、契約者ご本人が店頭で行う必要があります。身分証明書をご持参ください。一部プランはウェブでの手続きも可能です。
    <% end %>
  </div>

<div class="py-4 border-b border-gray-300"
     data-controller="accordion">
  <button class="group w-full flex justify-between text-xl cursor-pointer"
          data-action="click->accordion#toggle"
          data-accordion-target="trigger"
          aria-expanded="false">
    <span><%= title %></span>
    <div class="group-aria-[expanded=true]:rotate-180 pt-2 transition-all duration-300">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
      </svg>
    </div>
  </button>
  <div data-accordion-target="revealable" class="h-0 overflow-hidden transition-all duration-300 text-sm">
    <div class="mt-4"><%= yield %></div>
  </div>
</div>

<div class="py-4 border-b border-gray-300">
  <details class="group">
    <summary class="flex cursor-pointer list-none items-start justify-between text-xl marker:content-none">
      <span><%= title %></span>
      <span class="pt-2 transition-transform duration-300 group-open:rotate-180" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
          <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
        </svg>
      </span>
    </summary>
    <div class="text-sm">
      <div>
        <div class="mt-4"><%= yield %></div>
      </div>
    </div>
  </details>
</div>