ブロックの折りたたみ&展開

JavaScriptでスタイルシートの設定との関連付けをコントロールすることで、内容を表示させたり、折りたたんだりすることができます。

Javascript内で、スタイルを指定しておかないと、Javascriptが無効になっているブラウザでは、『折りたたむ』に初期設定した部分は、参照することができなくなる。
Javascript内に設定すると、Javascriptが無効のときは、スタイルシートも読み込めないので、display: none;が有効にならず、内容が初期状態で表示される為、内容が表示されないままになることを回避できる。

詳しい記述は、サンプルページのソースを参照してみて下さい。

サンプル画面

正しくない部分があるかもしれませんので、正確なところは、ご自身でお調べ下さい(^_^;)

関連書籍



ホームページ辞典 第5版 HTML・CSS・JavaScript
著者: 株式会社アンク   出版年月: 2012-03-14  
定価: ¥ 2,100 (新品)
HTML5とJavaScriptでスマートフォンゲーム作成! ゼロからはじめるenchant.js入門【公式ガイド】
著者: 布留川英一   出版年月: 2012-02-18  
定価: ¥ 3,150 (新品)
10日でおぼえるJavaScript入門教室 第3版
著者: 大槻 有一郎   出版年月: 2012-02-14  
定価: ¥ 2,730 (新品)
Titanium Mobile iPhone/Androidアプリ開発入門―JavaScriptだけで作る
著者: 小澤 栄一   出版年月: 2012-02  
定価: ¥ 2,520 (新品), ¥ 5,524 (中古)
Your rating: なし Average: 4 (3 votes)

にほんブログ村 IT技術ブログへ人気ブログランキングへ