<?xml version="1.0"?>
  <!-- Simple example to demonstrate the Accordion layout container. -->
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  
      <mx:Panel title="Accordion Container Example" height="90%" width="90%" 
          paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
  
          <mx:Label width="100%" color="blue"
              text="Select an Accordion navigator button to change the panel."/>
  
          <mx:Accordion id="accordion" 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="blue"
              text="Programmatically select the panel using a Button control."/>
  
          <mx:HBox>
              <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>