<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            private function prevChild():void {
                accordion.selectedIndex--;
            }

            private function nextChild():void {
                accordion.selectedIndex++;
            }
        ]]>
    </mx:Script>

    <mx:Accordion id="accordion"
            headerRenderer="comps.MyAccHeader"
            width="100%" height="100%">
        <mx:VBox id="v1" label="One" width="100%" height="100%">
            <mx:VBox width="100%" height="100%">
                <mx:Label text="One" />
            </mx:VBox>
            <mx:ControlBar horizontalAlign="right" width="100%">
                <mx:Spacer width="100%" />
                <mx:Button label="next" click="nextChild();" />
            </mx:ControlBar>
        </mx:VBox>
        <mx:VBox id="v2" label="Two" width="100%" height="100%">
            <mx:VBox width="100%" height="100%">
                <mx:Label text="Two" />
            </mx:VBox>
            <mx:ControlBar width="100%">
                <mx:Button label="prev" click="prevChild();" />
                <mx:Spacer width="100%" />
                <mx:Button label="next" click="nextChild();" />
            </mx:ControlBar>
        </mx:VBox>
        <mx:VBox id="v3" label="Three" width="100%" height="100%">
            <mx:VBox width="100%" height="100%">
                <mx:Label text="Three" />
            </mx:VBox>
            <mx:ControlBar width="100%">
                <mx:Button label="prev" click="prevChild();" />
                <mx:Spacer width="100%" />
                <mx:Button label="next" click="nextChild();" />
            </mx:ControlBar>
        </mx:VBox>
        <mx:VBox id="v4" label="Four" width="100%" height="100%">
            <mx:VBox width="100%" height="100%">
                <mx:Label text="Four" />
            </mx:VBox>
            <mx:ControlBar width="100%">
                <mx:Button label="prev" click="prevChild();" />
                <mx:Spacer width="100%" />
                <mx:Button label="next" click="nextChild();" />
            </mx:ControlBar>
        </mx:VBox>
        <mx:VBox id="v5" label="Five" width="100%" height="100%">
            <mx:VBox width="100%" height="100%">
                <mx:Label text="Five" />
            </mx:VBox>
            <mx:ControlBar width="100%">
                <mx:Button label="prev" click="prevChild();" />
                <mx:Spacer width="100%" />
            </mx:ControlBar>
        </mx:VBox>
    </mx:Accordion>

</mx:Application>