<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
<mx:Style>
HDividedBox{
horizontalDividerCursor:Embed(source="img/xn.png");
}

</mx:Style>
<mx:Script>
<![CDATA[
   import mx.core.UIComponent;
   import mx.events.DividerEvent;

        
   private function hiddenLeft(event:DividerEvent):void{
    var child:UIComponent = event.target.getChildAt(0);
    if(child.width == 0){
     expand1.play();
    }else{
     expand.play();
    }
   }

   ]]>
</mx:Script>
<mx:Resize id="expand" target="{childcontain}" widthTo="0"
        duration="1000"/>
<mx:Resize id="expand1" target="{childcontain}" widthTo="400"
        duration="1000"/>         
<mx:HDividedBox width="100%" height="100%"  dividerPress="hiddenLeft(event)" id="container"> 
  <mx:VDividedBox width="400" height="100%" id="childcontain">
     <mx:Panel width="100%" height="600" id="pan"/><mx:VBox width="100%" height="100%"/> 
   </mx:VDividedBox>
   <mx:Canvas height="100%" width="100%"/>
</mx:HDividedBox>
</mx:Application>