<?xml version="1.0"?>
<!-- Simple example to demonstrate the Accordion layout container. -->
<mx:Application 
    xmlns:mccune="com.dougmccune.containers.*"
    xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">

    <mx:Style source="AccordionDefaults.css" />
    
    <mx:Script>
        <![CDATA[
            import mx.containers.Accordion;
            /* We have to embed a font for the VAccordion. Without doing this the
             * labels that are rotated will be invisible. In AccordionDefaults.css
             * we reference the bolded font named 'accordionHeader' so that needs 
             * to match here. */
             [Embed(systemFont='Arial', fontWeight="bold", fontName='accordionHeader', mimeType='application/x-font', flashType='true')] 
             private var font1:Class;
        ]]>
    </mx:Script>
    
    <mx:Style>
        Panel { 
           headerHeight: 17;
           borderThickness: 0;
           roundedBottomCorners: true;
           backgroundAlpha: 1;
           borderAlpha: 1;
           highlightAlphas: 0.73, 0;
           
           headerColors: #000000, #000000;
           footerColors: #000000, #000000;
           borderColor: #000000;
           titleStyleName: "myTitleStyle";
        } 

        .myTitleStyle {
               color: #ffffff;
           }
    </mx:Style>
    
    
    <mx:VBox width="100%" height="100%">
        
    
        <mx:Panel title="HAccordion" height="100%" width="100%" 
            paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
    
            
            <mccune:HAccordion id="accordion" width="100%" height="100%">
                <!-- Define each panel using a VBox container. -->
                <mx:VBox label="Accordion Button for Panel 1" horizontalScrollPolicy="off">
                    <mx:Label text="Accordion container panel 1"/>
                </mx:VBox>
    
                <mx:VBox label="Accordion Button for Panel 2" horizontalScrollPolicy="off">
                    <mx:Label text="Accordion container panel 2"/>
                </mx:VBox>
    
                <mx:VBox label="Accordion Button for Panel 3" horizontalScrollPolicy="off">
                    <mx:Label text="Accordion container panel 3"/>
                </mx:VBox>
            </mccune:HAccordion>
          </mx:Panel>
          
          <mx:Panel title="VAccordion" height="100%" width="100%" 
            paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
    
            <mccune:VAccordion id="accordion2" 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>
            </mccune:VAccordion>
            
        
        </mx:Panel>
       </mx:VBox>
</mx:Application>