<?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="0" viewSourceURL="srcview/index.html">
 
    <mx:Panel title="Accordion Container" layout="vertical" color="0xffffff" borderAlpha="0.15" width="500" height="246"
         paddingTop="2" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
 
         <mx:Label width="100%" color="0x323232"
            text="Select an Accordion navigator button to change the panel."/>
 
        <mx:Accordion id="accorion" color="0x323232" width="100%" height="100%">
            <!-- Define each panel using a VBox container. -->
            <mx:VBox label="Accordion Button for Panel 1">
                <mx:Label text="Accordion container panel 1"/>
            </mx:VBox>
 
            <mx:VBox label="Accordion Button for Panel 2">
                <mx:Label text="Accordion container panel 2"/>
            </mx:VBox>
 
            <mx:VBox label="Accordion Button for Panel 3">
                <mx:Label text="Accordion container panel 3"/>
            </mx:VBox>
        </mx:Accordion>
 
        <mx:Label width="100%" color="0x323232"
            text="Programmatically select the panel using a Button control."/>
 
        <mx:HBox color="0x323232">
            <mx:Button label="Select Panel 1" click="accorion.selectedIndex=0;"/>
            <mx:Button label="Select Panel 2" click="accorion.selectedIndex=1;"/>
            <mx:Button label="Select Panel 3" click="accorion.selectedIndex=2;"/>
        </mx:HBox>
 
    </mx:Panel>
</mx:Application>