技術

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

【Docker/Mac】Dockerコマンド

どうも中田です。 今回はDocker。 巷でよく話には出てましたが使ってみるとめ …

no image

heroku + node.jsでError R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

こんにちは heroku + node.jsでアプリを作っていて、いざherok …

no image

[wordpress]各固定ページに個別のCSSを読み込ませる

こんばんは wordpreddでオリジナルテーマを作成している時、各固定ページに …

[ Rails ] ExecJS::RubyRacerRuntime is not supported. Please replace therubyracer with mini_racer in your Gemfile or use Node.js as ExecJS runtime.

こんにちは。たなかです。 モバイルアプリ開発の内容でブログを書くことが多い私です …

no image

Angular6で子コンポーネントに文字列を渡す

文字列と変数の値を渡す時、記述が少しだけ違います。 // 文字列を渡したい時 & …