Ajax animation using 2 buttons

Hi! I have 2 buttons i am using. When I press the first button I get the animation with content1, then when i press the second button i get the animation with content 2 which show up on top the first animation which is fine. But If I click on button2 first I get the animation, and when I click on button1 the animation doesn't show up on top of the one displayed already. Thanks for the help. I am also planning on adding a third button, but I don't know how it's gonna work.

Here is the complete code:

<asp:ContentID="Content1"ContentPlaceHolderID="BodyContent"Runat="Server">

<asp:ScriptManagerID="ScriptManager1"runat="server"/>

<divclass="demoarea">

<br/><br/>

<!-- Button used to launch the animation -->

<asp:ButtonID="btnInfo"runat="server"Text="Version 2.0"BackColor="Maroon"BorderStyle="None"BorderWidth="0px"Font-Underline="True"ForeColor="White"OnClientClick="return false;"OnClick="btnInfo_Click"/>

<asp:ButtonID="btnInfo11"runat="server"Text="Version 1.1"BackColor="Brown"BorderStyle="Dotted"BorderWidth="0px"Font-Underline="True"ForeColor="White"OnClientClick="return false;"/>

<!-- "Wire frame" div used to transition from the button to the info panel -->

<divid="flyout"class="wireFrame"></div>

<!-- Info panel to be displayed as a flyout when the button is clicked -->

<divid="info"style="display: none; width: 700px; z-index: 2; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); font-size: 12px; border: solid 1px #CCCCCC; background-color: #FFFFFF; padding: 5px;">

<divid="btnCloseParent"style="float: right; opacity: 100; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);">

<asp:LinkButtonid="btnClose"runat="server"

OnClientClick="return false;"

Text="X"ToolTip="Close"

Style="background-color: #666666; color: #FFFFFF; text-align: center; font-weight: bold; text-decoration: none; border: outset thin #FFFFFF; padding: 5px;"/>

</div>

this is text for animation 1

</div>

<!-- div for version 1.1-->

<divid="info11"style="display: none; width: 700px; z-index: 2; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); font-size: 12px; border: solid 1px #CCCCCC; background-color: #FFFFFF; padding: 5px;">

<divid="btnCloseParent11"style="float: right; opacity: 100; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);">

<asp:LinkButtonid="btnClose11"runat="server"

OnClientClick="return false;"

Text="X"ToolTip="Close"

Style="background-color: #666666; color: #FFFFFF; text-align: center; font-weight: bold; text-decoration: none; border: outset thin #FFFFFF; padding: 5px;"/>

</div>

this is text for animation 2

</div>

<scripttype="text/javascript"language="javascript">

// Move an element directly on top of another element (and optionally

// make it the same size)

function Cover(bottom, top, ignoreSize) {

var location = Sys.UI.DomElement.getLocation(bottom);

top.style.position ='absolute';

top.style.top = location.y +'px';

top.style.left = location.x +'px';if (!ignoreSize)

{

top.style.height = bottom.offsetHeight +'px';

top.style.width = bottom.offsetWidth +'px';

}

}

</script>

<ajaxToolkit:AnimationExtenderid="OpenAnimation"runat="server"TargetControlID="btnInfo">

<Animations>

<OnClick>

<Sequence>

<%-- Disable the button so it can't be clicked again --%>

<EnableActionEnabled="false"/>

<%-- Position the wire frame and show it --%>

<ScriptActionScript="Cover($get('btnInfo'), $get('flyout'));"/>

<StyleActionAnimationTarget="flyout"Attribute="display"Value="block"/>

<%-- Move the wire frame from the button's bounds to the info panel's bounds --%>

<ParallelAnimationTarget="flyout"Duration=".3"Fps="25">

<MoveHorizontal="150"Vertical="-50"/>

<ResizeWidth="700"Height="280"/>

<ColorPropertyKey="backgroundColor"StartValue="#AAAAAA"EndValue="#FFFFFF"/>

</Parallel>

<%-- Move the panel on top of the wire frame, fade it in, and hide the frame --%>

<ScriptActionScript="Cover($get('flyout'), $get('info'), true);"/>

<StyleActionAnimationTarget="info"Attribute="display"Value="block"/>

<FadeInAnimationTarget="info"Duration=".2"/>

<StyleActionAnimationTarget="flyout"Attribute="display"Value="none"/>

</Sequence>

</OnClick>

</Animations>

</ajaxToolkit:AnimationExtender>

<ajaxToolkit:AnimationExtenderid="CloseAnimation"runat="server"TargetControlID="btnClose">

<Animations>

<OnClick>

<SequenceAnimationTarget="info">

<%-- Shrink the panel out of view --%>

<StyleActionAttribute="overflow"Value="hidden"/>

<ParallelDuration=".3"Fps="15">

<ScaleScaleFactor="0.05"Center="true"ScaleFont="true"FontUnit="px"/>

<FadeOut/>

</Parallel>

<%-- Reset the target --%>

<StyleActionAttribute="display"Value="none"/>

<StyleActionAttribute="width"Value="700px"/>

<StyleActionAttribute="height"Value="200px"/>

<StyleActionAttribute="fontSize"Value="12px"/>

<%-- Enable the button --%>

<EnableActionAnimationTarget="btnInfo"Enabled="true"/>

</Sequence>

</OnClick>

</Animations>

</ajaxToolkit:AnimationExtender>

<!-- Animation for Version 1.1 -->

<ajaxToolkit:AnimationExtenderid="AnimationExtender1"runat="server"TargetControlID="btnInfo11">

<Animations>

<OnClick>

<Sequence>

<%-- Disable the button so it can't be clicked again --%>

<EnableActionEnabled="false"/>

<%-- Position the wire frame and show it --%>

<ScriptActionScript="Cover($get('btnInfo11'), $get('flyout'));"/>

<StyleActionAnimationTarget="flyout"Attribute="display"Value="block"/>

<%-- Move the wire frame from the button's bounds to the info panel's bounds --%>

<ParallelAnimationTarget="flyout"Duration=".3"Fps="25">

<MoveHorizontal="150"Vertical="-50"/>

<ResizeWidth="260"Height="280"/>

<ColorPropertyKey="backgroundColor"StartValue="#AAAAAA"EndValue="#FFFFFF"/>

</Parallel>

<%-- Move the panel on top of the wire frame, fade it in, and hide the frame --%>

<ScriptActionScript="Cover($get('flyout'), $get('info11'), true);"/>

<StyleActionAnimationTarget="info11"Attribute="display"Value="block"/>

<FadeInAnimationTarget="info11"Duration=".2"/>

<StyleActionAnimationTarget="flyout"Attribute="display"Value="none"/>

</Sequence>

</OnClick>

</Animations>

</ajaxToolkit:AnimationExtender>

<ajaxToolkit:AnimationExtenderid="AnimationExtender2"runat="server"TargetControlID="btnClose11">

<Animations>

<OnClick>

<SequenceAnimationTarget="info11">

<%-- Shrink the panel out of view --%>

<StyleActionAttribute="overflow"Value="hidden"/>

<ParallelDuration=".3"Fps="15">

<ScaleScaleFactor="0.05"Center="true"ScaleFont="true"FontUnit="px"/>

<FadeOut/>

</Parallel>

<%-- Reset the target --%>

<StyleActionAttribute="display"Value="none"/>

<StyleActionAttribute="width"Value="700px"/>

<StyleActionAttribute="height"Value="200"/>

<StyleActionAttribute="fontSize"Value="12px"/>

<%-- Enable the button --%>

<EnableActionAnimationTarget="btnInfo11"Enabled="true"/>

</Sequence>

</OnClick>

</Animations>

</ajaxToolkit:AnimationExtender>

</div>

</asp:Content>

I ended up diplaying the animation on top of the buttons.