+1  A: 

You will have to create a custom header renderer, add a button to it and position it manually. Try something like this:

            <AccordionHeader xmlns="mx.containers.accordionClasses.*">

                import mx.controls.Button;

                private var extraButton : Button;

                override protected function createChildren( ) : void {

                    if ( extraButton == null ) {
                        extraButton = new Button();


                override protected function updateDisplayList( unscaledWidth : Number, unscaledHeight : Number ) : void {
                    super.updateDisplayList(unscaledWidth, unscaledHeight);

                    extraButton.setActualSize(unscaledHeight - 6, unscaledHeight - 6);
                    extraButton.move(unscaledWidth - extraButton.width - 3, (unscaledHeight - extraButton.height)/2);


    <mx:HBox label="1"><Label text="Text 1"/></HBox>
    <mx:HBox label="1"><Label text="Text 2"/></HBox>
    <mx:HBox label="1"><Label text="Text 3"/></HBox>
+1  A: 

Thanks, I got it working using FlexLib's CanvasButtonAccordionHeader.

Shawn Simon

Hi Shawn, Would you please share the source code of using FlexLib's CanvasButtonAccordionHeader in your application. I am having a little trouble in finding the way around and the documentation on the page doesn't help much too.

Thanks in advance.

Alex Fisherr

Alex Fisherr