<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" viewSourceURL="srcview/index.html">
    
    <mx:Style source="/styles/accexample.css" />
    
    <mx:Script>
        <![CDATA[
            import mx.effects.Resize;
        
            private var res:Resize = new Resize();
            
            private function collapse():void{
                res.widthTo = 300;
                res.play([acc]);
            }
            
            private function expand():void{
                res.widthTo = 380;
                res.play([acc]);
            }
            
        ]]>
    </mx:Script>
    
    <mx:Accordion id="acc"
        width="380" height="250"
        headerRenderer="com.ilogyc.renderer.AccordionHeaderRenderer">
        
        <mx:VBox
            width="100%" styleName="stackContainer"
            label="Lorem ipsum dolor sit amet" >
            <mx:Text 
                width="100%"
                htmlText="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam cursus ipsum sit amet libero. Sed ligula. &lt;br&gt;&lt;br&gt;Nam eget dolor ut sem imperdiet sollicitudin. &lt;br&gt;&lt;br&gt;Fusce viverra, augue et rutrum pharetra, lorem elit venenatis massa, vitae gravida elit felis in metus. Mauris dui leo, tristique quis, tempor et, tristique ac, erat." />
        </mx:VBox>
        
        <mx:VBox 
            width="100%" styleName="stackContainer"
            label="Sed volutpat">
            <mx:Text 
                width="100%"
                htmlText="Sed volutpat. Maecenas condimentum varius nulla. Nulla facilisi. &lt;br&gt;&lt;br&gt;Vestibulum scelerisque, nisi et scelerisque lobortis, massa felis laoreet magna, ut bibendum felis augue sed diam. Etiam odio. Nulla nec nunc sed massa ornare pulvinar. &lt;br&gt;&lt;br&gt;Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus mollis. Suspendisse iaculis, massa eu luctus pellentesque." />
        </mx:VBox>
        
        <mx:VBox 
            width="100%" styleName="stackContainer"
            label="Donec nibh felis">
            <mx:Text 
                width="100%"
                htmlText="Donec nibh felis, tempor quis, dictum et, ullamcorper sed, enim. &lt;br&gt;&lt;br&gt;Maecenas a neque. Sed augue." />
        </mx:VBox>
        
    </mx:Accordion>
    
    <mx:HBox>
        <mx:Button
            label="Collapse" 
            click="collapse()"/>
        <mx:Button
            label="Expand" 
            click="expand()"/>
    </mx:HBox>
    
</mx:Application>