CSS サンプル: JavaScriptを使わないツリービュー
チェックボックスのON・OFFをもとにツリーの開閉を実現します。
単純な例
項目a
項目a-1
項目a-1-1
項目a-1-2
項目a-2
項目b
項目b-1
項目b-2
項目c
<label> を活用して項目テキストのクリックでチェック開閉をできるようにする例
項目a
項目a-1
項目a-1-1
項目a-1-2
項目a-2
項目b
項目b-1
項目b-2
項目c
チェックボックスを変更する例
※十字を linear-gradient() で表現しているためブラウザごとに若干違いがあります。
項目a
項目a-1
項目a-1-1
項目a-1-2
項目a-2
項目b
項目b-1
項目b-2
項目c