details+summaryでJSなしの折りたたみ | 10press

ウェブサイト制作、HTML5・CSS3、CMS「freo」についての備忘録 MENU MENU ホーム ブログ freo Tips details+summaryでJSなしの折りたたみ HTML5から導入された詳細折りたたみ要素、detailsを使ってfreoのサイドバーを折りたたむTIPSです。 details要素の概要 <details> <summary>Details</summary> Something small enough to escape casual notice. </details> detailsは上記のようにsummaryとセットで使います。実際にブラウザでどのように表示されるかは以下。 Details このように<summary>～</summary>で囲まれた部分が開閉のトグルボタンとなります。また、詳細（折りたたまれるコンテンツ）にはプレーンテキストだ