Collapsible Panel component

<?xml version="1.0" encoding="utf-8"?>

<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="addComponents()"

            backgroundColor="#ffffff" backgroundAlpha="0.5">

      <mx:Metadata>

            [DefaultProperty("visualChildren")]

      </mx:Metadata>

      <mx:Script>

            <![CDATA[

                  import mx.core.UIComponent;

                  private var _components:Array;

                  public function set visualChildren(value:Array):void

                  {

                        _components = value;

                  }

                  private function addComponents():void

                  {

                        if (container.numChildren != 0)

                             container.removeAllChildren();

                        if (!_components)

                             return ;

                        for(var i:int = 0; i < _components.length; i++)

                        {

                             container.addChild(_components[i]);

                        }

                  }

                  private function updateState():void

                  {

                        if (currentState == 'collapsed')

                        {

                             currentState = '';

                        }

                        else

                        {

                             currentState = 'collapsed';

                        }

                  }

            ]]>

      </mx:Script>

      <mx:states>

            <mx:State name="collapsed">

                  <mx:RemoveChild target="{container}" />

                  <mx:SetProperty target="{titleLabel}" name="text"

                                         value="Click to open" />

            </mx:State>

      </mx:states>

      <mx:HBox id="header"

                   width="100%" height="20"

                   backgroundColor="#ffffff" mouseChildren="false"

                   buttonMode="true" click="{updateState()}">

            <mx:Label id="titleLabel"

                          width="100%"

                          text="Click to close" />

      </mx:HBox>

      <mx:VBox id="container"

                   paddingLeft="5" paddingRight="5"

                   paddingTop="5" paddingBottom="5" />

</mx:Box>