<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/18/dynamically-adding-new-children-to-a-flex-accordion-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.containers.VBox;

            private const MAX_CHILDREN:uint = 5;

            private function accordion_addChild():void {
                if (accordion.numChildren < MAX_CHILDREN) {
                    var vbox:VBox = new VBox();
                    vbox.label = "child " + accordion.numChildren;
                    vbox.percentWidth = 100;
                    vbox.percentHeight = 100;
                    var randColor:uint = Math.random() * 0xFFFFFF;
                    vbox.setStyle("backgroundColor", randColor);
                    accordion.addChild(vbox);
                }
            }

            private function accordion_deleteChild():void {
                if (accordion.selectedChild) {
                    accordion.removeChild(accordion.selectedChild);
                }
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Add child"
            click="accordion_addChild();" />
        <mx:Button label="Delete child"
            click="accordion_deleteChild();" />
    </mx:ApplicationControlBar>

    <mx:Accordion id="accordion" width="240" height="160" />

</mx:Application>