dojo - クリックして dijit スプリッターを最小化/最大化するにはどうすればよいですか?

Question

ユーザーがクリックしたときに dijit スプリッターを最小化し、もう一度クリックするとその位置に戻るようにしたい (ドラッグ可能な機能は気にしない)

どうすればいいのですか ？

この例では、スプリッターをクリックしたときに右側のパネルを最小化します

http://77.235.53.170/split/split.htm

Answer 1

左ペインでdojox.layout.ExpandoPaneを試してみてください。

var bc = new BorderContainer({
    splitter:true, 
    gutters:false
}, containerDiv);

new ExpandoPane({
    region:"left",
    title: "Expandable pane",
    className: yourClassName
}).placeAt(bc);

編集:リクエストに基づいて更新:

1. これを頭に入れてください：

   <link href="js/dojox/layout/resources/ExpandoPane.css" rel="stylesheet" type="text/css" />

2. 次のようにペインを変更します。

   <div id="leftCol" class="edgePanel" title="Left Expando" data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props="title:'Left Expando', region: 'leading', splitter: true" style="width: 250px;">
       <div data-dojo-type="dijit/layout/TabContainer" style="width: 400px; height: 95%;"
           tabstrip="true">
           <div data-dojo-type="dijit/layout/ContentPane" title="Layers" selected="true">
               <div id="CheckboxTree">
               </div>
           </div>                
       </div>
   </div>