Closing the previous collapsible panel on the opening of another on same page !

Hi,

I have a login form on which I am having two panels giving two kinds of user to login. Both the panels are in their respective collapsible panels. Now what I want is that if suppose I have clicked on colapsible panel1 and it opens and and than i click on collapsible panel2 , collapsible panel2 should expand but collapsible panel should collapse automatically making only one collpase panel to be opened at a time. Moreover I am not making use of any other link button event to open the collpasible panel, all I am using is pure ajax. So, can i achieve this ???

My html code of collapsible panel is given below :

<cc1:CollapsiblePanelExtender ID="cpeOnlineLogin" runat="server" TargetControlID="pn_online_login"
                                    ExpandControlID="pn_header_online" CollapseControlID="pn_header_online" TextLabelID="lblOnline"
                                    CollapsedText="Online Users<span style='text-decoration:underline;padding-left:5px; color:#0066cc'>Click Here</span>"
                                    ExpandedText=" Enter Your Details Below" Collapsed="True" SuppressPostBack="true"
                                    BehaviorID="cpeOnlineLogin">
                                </cc1:CollapsiblePanelExtender>

  <cc1:CollapsiblePanelExtender ID="cpelogin" runat="server" TargetControlID="pn_offline_login"
                                    ExpandControlID="pn_Header_cpe" CollapseControlID="pn_Header_cpe" TextLabelID="lblText"
                                    CollapsedText="Offline Users<span style='text-decoration:underline; padding-left:5px; color:#0066cc'>Click Here</span>"
                                    ExpandedText=" Enter Your Details Below" Collapsed="True" SuppressPostBack="true"
                                    BehaviorID="cpelogin">
                                </cc1:CollapsiblePanelExtender>

Please help !