<?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">

    <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>