ホーム ブログ 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>で囲まれた部分が開閉のトグルボタンとなります。また、詳細(折りたたまれるコンテンツ)にはプレーンテキストだけでなくdiv、p、ulやolなどを入れることができます。 detailsの折りたたみ表示はIE