? ??? ?? Rails Designer? ???????

---

HTML? CSS? ??? ?? ?? ? ????? ?? ??? ????. ??? JavaScript ??? ??? ????, ??? ?? ??? ?? ?????.

JavaScript? ???? ?? ? ? ??? ???? ???????. Vue, Alpine ? Stimulus? ?? JS ?????? ???? ?? ??? ?? ????? ?? ???? ??? ???? ??? ?? ??? ???? ????. ??? ?? ?? ???? CSS? ??? ???.

? ?? ?? ??? ????. ???? FAQ ?? ???? ??? ????. ?? ?? ??? ???? ???? ?????.

? ??? ??? ??? ????.

• ??;
• ??? ??? ??? ??;
• ? ???? ?? ?? Stimulus ??? ???? ???? ??? ?????.

?? ??

?? ???? ??? ??? ????.

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

  This is more!
</details>

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

  This is even more!
</details>

? ??? ??? ????.

?? ??? ??? ?? ??? ?????. ?

?? ???? ??? ??? ???!

????/?? ??

????/?? ???? ? ?? ???? ??? ?? ????.

• ??-??; ????? ?? ??? ??? ??? ? ??? ??? ? ????(?? CSS?? ???).
• ??-??? ?????. ??? ?? ???? ?? ??? ? ? ????. ??? ?? ?? ?? ??? ???? ????.

<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>

??? ???:

?? ??? ??? ?? ??? ?????. ?

???? ??? ?????

???? ?? ?? ?? ???? ?? CSS? ???? ?? ?? ??? ?????. ?? ??? ??? ????.

• [&::-webkit-details-marker]:??; ??? ?? ?? ???? ??? ?????.
• ?? ??/????:??-180; ??? ?? ??? ?? ??? ?? ???? ???? ?????.

Tailwind CSS? ??? ?? ??? ??? ????.

<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
  }
});

??? ??? ??? ? ???? ?? ?? ????? localStorage? ?? details ??? ??? ???? ????? ????? ???. ?? ?? ????? ??? ?????:

// 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);
      }
    });
  }
}

? ?? ??? ??????? ???? FAQ ?? ???? ?? ????? ??? ? ????.

?? HTML? ????? ???? ?? ??? ?????. ?? ???? ??? ?? CSS? ???? ???? ??? ??? ??? Stimulus ????? ???? ???? ??? ?? ???? ? ????.

? ??? JavaScript? ?? ??? ????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!