技術

HTMLタグだけでアコーディオンを実装する

投稿日:

こんにちは

htmlタグのdetailsというのは知っていますか?
僕も初めて知ったのですが、使い所によってはかなり便利だと思うので紹介します。

codepenに使用例を書いたのでご覧ください
detailsの使用例

<details>
<summary>close test</summary>
close
</details>

<details open>
<summary>open test</summary>
open
</details>

これだけでアコーディオン実装が可能です。
details要素はtoggleイベントにも対応していますので
要素が開いた後に何かをしたい場合はjsで処理をかけます。

めちゃくちゃ便利なのですが、問題も。。。

・IE、edgeは非対応
・アニメーションは現状付けれない

IEどうにかなりませんかね?????

参考サイト
MDN

-技術

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

【nginx】そうだ!Basic認証を掛けよう

どうも、中田です。 nginxでベーシック認証をかける方法です。 これからもよく …

no image

[JavaScript]IEのif文の判定がchromeと違う?

こんにちは、コーテッグのこやまです。 今持っている案件で、IE対応を進めているの …

no image

VivaldiのWEBパネルに登録して便利だったサイトを紹介する

こんばんは VivaldiのWEBパネルはとても便利です。 今回はWEBパネルに …

no image

【AngularJS】angularjs-datatable。クリックが効かない問題!

どうも中田です。 今日は情けないブログを書きます。 angularJSでdata …

no image

[TypeScript]enumを代入記法で書いた場合に、値からキーが取れるか調べてみた。

TypeScriptのenumのドキュメント(TypeScript Deep D …