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

この記事は元々 Rails Designer で公開されたものです

---

HTML と CSS が長年にわたって大幅に改良されていることは周知の事実です。 JavaScript を書くのが楽しくなりましたが、できる限りJavaScript を書いています。

JavaScript を必要としないものの 1 つは、典型的なアコーディオンです。これは、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>

これがどのように見えるかです:

実際の例については、元の記事をご覧ください。 ?

あまり美しくありませんが、機能します!

詳細/概要属性

詳細/概要要素には興味深いトリックがいくつかあります。

• open - 属性;デフォルトで 1 つまたは複数の要素を開くようにこの属性を設定できます (以下の CSS にも使用されます);
• 名前属性を追加します。これにより、details 要素を 1 つだけ開くことができます。 1 つを開くと、他のすべても自動的に閉じます。

<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]:hidden;これにより、デフォルトのシェブロンが非表示になります;
• グループオープン/詳細:回転-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
  }
});

これは何に使えますか?たとえば、details 要素の状態をブラウザーの localStorage に保存して、全体にわたって永続化します。小さな Stimulus コントローラーを使って確認してみましょう:

// 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 中国語 Web サイトの他の関連記事を参照してください。