Accordian

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#874040, #874040]">   

   

    <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="accordion" 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="accordion.selectedIndex=0;"/>

            <mx:Button label="Select Panel 2" click="accordion.selectedIndex=1;"/>

            <mx:Button label="Select Panel 3" click="accordion.selectedIndex=2;"/>

        </mx:HBox>

       

    </mx:Panel>

</mx:Application>