jquery.dynatree.jsを使って、エクスプローラーのようなツリー型ナビゲーションを表示します。 また、iframe内からtoggle()で、ナビゲーションのたたむ、開くを操作します。ナビゲーションからはファイル（htmlのみ）をクリックして、その内容をiframeに書き換えて表示します。

追記（注意）：ナビゲーションを構成するすべてのli要素の閉じタグは記述しない状態で機能するようになっています。記述すると階層がうまく開きません。

 

フォルダー01 dummy-a01.html サブフォルダー01 item02 item03 dummy-a02.html item05 item06 フォルダー02 item07 dummy-a03.html item09 item10> フォルダー03 item11 item12

iframe（この下）