技術

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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

[AWS S3] This XML file does not appear to have any style information associated with it. The document tree is shown below.

はじめまして。田中です。 AWSを触りはじめてから1ヶ月ちょっと。七転び八起きな …

no image

BitbucketからGithubの移行で、しょうもなくハマる。

こんにちはー。コーテッグのこやまです。 コーテッグはずっとBitbucketを使 …

no image

document.querySelectorで色々なDOMを取得する

こんにちは javascriptでDOMを取得することは結構あるかと思います。 …

Slack Tasker系アプリで絵文字ステータスを自動設定(android 「Automate」)

Slackの絵文字ステータス、皆さん使っているでしょうか? 私は自分の居る場所に …

[Xcode] The executable was signed with invalid entitlements. でアプリを実機確認できない!

こんにちは。たなかです。 作ったiOSアプリを実機確認したくて、Xcodeからデ …