<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
viewSourceURL="@mx-mashup-rmx-05-AccordionExample-AccordionExample.html" 
  creationComplete="init()"
  xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="400">

  <mx:Style>
    .myHeaderStyle
    {
      upSkin: Embed("mashup-rmx-05-AccordionExample-images-upskin.jpg");
      downSkin: Embed("mashup-rmx-05-AccordionExample-images-downskin.jpg");
      overSkin: Embed("mashup-rmx-05-AccordionExample-images-overskin.jpg");
      selectedUpSkin: Embed("mashup-rmx-05-AccordionExample-images-selectedupskin.jpg");
      selectedDownSkin: Embed("mashup-rmx-05-AccordionExample-images-selecteddownskin.jpg");
      selectedOverSkin: Embed("mashup-rmx-05-AccordionExample-images-selectedoverskin.jpg");
    }
  </mx:Style>

  <mx:Script>
    <![CDATA[
    	import mx.controls.Button;
    
      private function init():void
      {
        var totalPanes:Array = this.myAccordion.getChildren();
        for (var i:uint; i < totalPanes.length; i++)
        {
          var header:Button = this.myAccordion.getHeaderAt(i) as Button;
          header.buttonMode = true;
        }
      }
    ]]>
  </mx:Script>

  <mx:Accordion 
    id="myAccordion"
    width="100%" height="100%"
    headerStyleName="myHeaderStyle">
    
    <mx:Canvas label="My First Pane">
      <mx:Text text="Hello world!" fontSize="16"/>
    </mx:Canvas>
    <mx:Canvas label="My Second Pane">
      <mx:Text text="Hello world!" fontSize="16"/>
    </mx:Canvas>
  
  </mx:Accordion>
</mx:Application>