<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/24/toggling-a-flex-containers-visibility-using-states/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

	<mx:transitions>
		<mx:Transition fromState="*" toState="*">
			<mx:Parallel targets="{[vbox2]}">
				<mx:WipeDown />
				<mx:Fade />
			</mx:Parallel>
		</mx:Transition>
	</mx:transitions>

	<mx:states>
		<mx:State name="expanded">
			<mx:AddChild relativeTo="{vbox1}" position="after">
		        <mx:VBox id="vbox2"
		                width="120"
		                height="100%"
		                backgroundColor="haloGreen">
		            <mx:Label text="VBox 2" />
		        </mx:VBox>
			</mx:AddChild>
		</mx:State>
	</mx:states>

    <mx:Style>
        VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
        	import mx.effects.easing.*;
        
            [Bindable]
            [Embed(source="assets/help.png")]
            private var helpIcon:Class;
            
            private function toggleExpanded():void {
            	switch (currentState) {
            		case "expanded":
            			currentState = "";
            			break;
            		default:
            			currentState = "expanded";
            			break;
            	}
            }
        ]]>
    </mx:Script>

    <mx:HBox width="100%" height="100%">
        <mx:VBox id="vbox1"
                width="120"
                height="100%"
                backgroundColor="haloOrange">
            <mx:Label text="VBox 1" />
            <mx:Button label="Help"
           			icon="{helpIcon}"
                    click="toggleExpanded()" />
        </mx:VBox>

        <mx:VBox id="vbox3"
                width="100%"
                height="100%"
                backgroundColor="haloBlue">
            <mx:Label text="VBox 3" />
        </mx:VBox>
    </mx:HBox>

</mx:Application>
