Hide/Show the flex elements by id in action script 3

Hide/Show any flex element by ID in action script. Toggle any element in flex.

The below example gives the toggle of HBox on click of the label.

Here is the code to achieve the toggle functionality of any flex element in actionscript 3.

Have added the comments in the code to explain use of each element.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
//Add event listner to any element in flex to call the below function to hide/show the HBox by id

//Say on click of the lable call the handlerFunction.
public function handlerFunction(event:Event):void {
//get the id of the element by getting the data of the calling element event
var id:String = event.currentTarget.data.toString();
//get the handle of parent element. i.e. VBox in the below code
var parentVBox:VBox = event.currentTarget.parent as VBox;
//get the handle to the element by id
var hBoxtoShow:HBox = parentVBox.getChildByName(id) as HBox;
//code to toggle the HBox (hide/show)
if (hBoxtoShow.includeInLayout) {
hBoxtoShow.includeInLayout = false;
hBoxtoShow.visible = false;
} else {
hBoxtoShow.includeInLayout = true;
hBoxtoShow.visible = true;
}
}

public function init():void {
//add HBox id to the lable data. This is used for dynamic hide/show of multiple elements
labelID.data = "hideHBox";
labelID.addEventListener(MouseEvent.CLICK , handlerFunction);
}
]]>
</mx:Script>
<mx:VBox id="mainVBox">

<mx:Label text="Click me" id="labelID"/>
<mx:HBox id="hideHBox">
<mx:Text text="Sample HBox filed to hide this on click of the label"/>
</mx:HBox>

</mx:VBox>
</mx:Application>