ウェブサイト制作、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>で囲まれた部分が開閉のトグルボタンとなります。また、詳細(折りたたまれるコンテンツ)にはプレーンテキストだ
![details+summaryでJSなしの折りたたみ | 10press](https://cdn-ak-scissors.b.st-hatena.com/image/square/2dc0bc14337dbbb9272b62d2d8301ecc8fd05967/height=288;version=1;width=512/https%3A%2F%2F10prs.com%2Ffiles%2Fmedias%2Fimg%2FOGP.png)