JavaScriptを使わないシンプルなアコーディオン

<details>
  <summary>
    Show me more
  </summary>

  This is more!
</details>

<details>
  <summary>
    Show me even more
  </summary>

  This is even more!
</details>

<details name="more" open>
  <summary>
    Show me more
  </summary>

  This is more!
</details>

<details name="more">
  <summary>
    Show me even more
  </summary>

  This is even more!
</details>

<details>



<p>This is how it looks:</p>

<blockquote>
<p>View the original article to live examples. ?</p>
</blockquote>

<h2>
  
  
  Progressive enhancements
</h2>

<p>A <strong>toggle</strong> event is dispatched on the <strong>details</strong>-element whenever it state changes. So you could listen for it like this:<br>
</p>

<pre class="brush:php;toolbar:false">details.addEventListener("toggle", (event) => {
  if (details.open) {
    // Do something
  } else {
    // Do something else
  }
});

// app/javascript/controllers/accordion_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    this.element.open = localStorage.getItem(this.element.id) === "open";

    this.#attachEventListeners();
  }

  // private

  #attachEventListeners() {
    this.element.addEventListener("toggle", (event) => {
      if (this.element.open) {
        localStorage.setItem(this.element.id, "open");
      } else {
        localStorage.removeItem(this.element.id);
      }
    });
  }
}