Write this In your MXML File

  <mx:Move id="panelOut" target="{panel}" xTo="0" effectEnd="btn.label='Close'"
        duration="1500" easingFunction="Bounce.easeOut"/>
    <mx:Move id="panelIn" target="{panel}" xTo="-230" effectEnd="btn.label='Open'"
        duration="1000" easingFunction="Bounce.easeIn"/>


    <mx:Canvas id="panel" width="250" height="50%" backgroundColor="#F79A9A" verticalCenter="69">
    <!--Add the content of your sliding panel here  -->
    <mx:HBox width="100%" height="100%">
        <mx:Accordion id="myAccor" height="100%" width="100%">
            <mx:Form label="A" width="100%" height="100%">
            </mx:Form>
            <mx:Canvas label="B" width="100%" height="100%">
            </mx:Canvas>
            <mx:Canvas label="C" width="100%" height="100%">
            </mx:Canvas>
            <mx:Canvas label="D" width="100%" height="100%">
            </mx:Canvas>

        </mx:Accordion>
        <mx:Button id="btn" width="20" height="100%" right="0" label="Open" click="toggleBtn(event)">
        </mx:Button>
    </mx:HBox>
---------------------------------------------------------------------------------------
        import mx.effects.easing.*;

            private function toggleBtn(e:MouseEvent):void{
                if(e.currentTarget.label== 'Open')
                    panelOut.play();
                else
                    panelIn.play();
            }

<!--Other Easing Function are :
1. Back.easeIn
2. Bounce.easeIn
3. Circular.easeIn
4. Cubic.easeIn
5. Elastic.easeIn
6. Exponential.easeIn
7. Linear.easeIn
8. Quadratic.easeIn
9. Quartic.easeIn
10. Quintic.easeIn
11. Sine.easeIn
-->