アコーディオン

アコーディオンコンポーネントを構築するとき、私は通常ブートストラップのアコーディオン実装に到達します.私が使用するプロジェクトの大部分は、それが常に明白な選択のようであるように、ブートストラップを使用します.しかし、ちょっと複雑です.

<p>
  <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Click me please!
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div>
    Ooh, you clicked!
  </div>
</div>

あなたはそれが動作するように多くの属性を必要とし、それを忘れるのは簡単ですかid とhref . なぜあなたの目の前に座っている問題の種類がいくつかの理由であなたを参照してくださいに絶対に年齢がかかります.

詳細要素

我々は今、私たちのアコーディオンの仕事をするために属性とID/HREFSのトンを使用することから保存されている<detail> 要素!

私はそれがどれくらい長くあったかについて、わかりません、しかし、同僚はちょうど私にそれを示しました、そして、それは不思議です.このように動作します.

<details>
    <summary>Accordion title</summary>
    Content you want to show/hide.
</details>

それは<detail> 要素<summary> それの中にネストされた要素だけでなく、どのようなコンテンツを表示する/非表示にします.内部は何でも<summary> 要素はアコーディオンタイトルとして表示され、他の何かが表示されます/タイトルがクリックされるときに非表示になります.あなたはおそらくいくつかのスタイリングをしたいが、オープン/クローズはすべてあなたのために扱われます.

イベント

この要素の別のクールな機能はtoggle イベントが開かれるたびにイベントが開きます.おそらくあなたはクールなアニメーションを表示したいですか?世界はあなたの牡蠣です!

例

私は非常に基本的な例をまとめましたhere .

サポート

詳細要素は現在、95 %のブラウザをサポートしています.サポートのレベルに関する詳細な情報を見つけることができますhere .

更なる読書

詳細はMDNで詳細要素を読むことができます.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details