MXML Accordian component
The Tab Navigation component is a built in container in Adobe Flex. The TabNavigator container extends the ViewStack container by including a TabBar container for navigating between its child containers. Like a ViewStack container, a TabNavigator container has a collection of child containers, in which only one child at a time is visible. Flex automatically creates a TabBar container at the top of the TabNavigator container, with a tab corresponding to each child container. Each tab can have its own label and icon. When the user clicks a tab, the corresponding child container becomes visible as the selected child of the TabNavigator container.
Here is the full MXML code.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="10" width="680" height="245">
<mx:Panel title="TabNavigator Container" layout="vertical" width="75%" color="0xffffff"
borderAlpha="0.15" height="210" horizontalAlign="center">
<mx:Label width="100%" color="0x323232" fontWeight="bold"
text="Select the tabs to change the panel."/>
<mx:TabNavigator id="tn" width="100%" height="100%" color="0x323232" >
<!-- Define each panel using a VBox container. The VBoxs are children of the TabNavigator -->
<mx:VBox label="Panel 1">
<mx:Label text="Content for Panel 1."/>
</mx:VBox>
<mx:VBox label="Panel 2">
<mx:Label text="Content for Panel 2"/>
</mx:VBox>
<mx:VBox label="Panel 3">
<mx:Label text="Content for Panel 3"/>
</mx:VBox>
</mx:TabNavigator>
</mx:Panel>
</mx:Application>