How to Collapse panel's when one panel is Expand in asp.net

See more:

ASP.NET

Ajax

Hi Friends,

Have a look at the following code .

<asp:Panel ID="pnlClick" runat="server" CssClass="pnlCSS">
 <div style="background-image: url('green_bg.gif'); height: 30px; vertical-align: middle; width: 280px;">
   <div style="float: left; color: White; padding: 5px 5px 0 0">
          Inward Details
     </div>
     <div style="float: right; color: White; padding: 5px 5px 0 0">
      
          <asp:Image ID="imgArrows" runat="server"  />
      </div>
     <div style="clear: both">
       </div>
    </div>
  </asp:Panel>

<asp:Panel ID="pnlInward" runat="server" Height="0" Width="100%" CssClass="pnlCSS">
<table id="grp0" runat="server">
 <tr class="tdred"> 
</tr>

 </table>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" CollapseControlID="pnlClick" Collapsed="false" ExpandControlID="pnlClick" TextLabelID="lblMessage"                                CollapsedText="Show" ExpandedText="Hide" ImageControlID="imgArrows" CollapsedImage="~/Images/downarrow.jpg"                                ExpandedImage="~/Images/uparrow.jpg" ExpandDirection="Vertical" TargetControlID="pnlInward"                            ScrollContents="false">                           </ajaxToolkit:CollapsiblePanelExtender>

<asp:Panel ID="pnlClick1" runat="server" CssClass="pnlCSS" >
 <div style="background-image: url('green_bg.gif'); height: 30px; vertical-align: middle;width: 280px;">
 <div style="float: left; color: White; padding: 5px 5px 0 0">
  Audit Details </div>
  <div style="float: right; color: White; padding: 5px 5px 0 0">  
      <asp:Image ID="imgArrows1" runat="server" />
   </div>
    <div style="clear: both">
    </div>
  </div>
  </asp:Panel>
<asp:Panel ID="pnlAudit" runat="server" Height="0" Width="100%" CssClass="pnlCSS">
<table id="grp2" runat="server">
<tr class="tdred">
</tr>
</table>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server"CollapseControlID="pnlClick1" Collapsed="true" ExpandControlID="pnlClick1" TextLabelID="lblMessage1"                                CollapsedText="Show" ExpandedText="Hide" ImageControlID="imgArrows1" CollapsedImage="~/Images/downarrow.jpg"                                ExpandedImage="~/Images/uparrow.jpg" ExpandDirection="Vertical" TargetControlID="pnlAudit"ScrollContents="false">                            </ajaxToolkit:CollapsiblePanelExtender>


<asp:Panel ID="pnlClick3" runat="server" CssClass="pnlCSS" >
  <div style="background-image: url('green_bg.gif'); height: 30px; vertical-align: middle; width: 280px;">
   <div style="float: left; color: White; padding: 5px 5px 0 0">
     QC Details
   </div>
  <div style="float: right; color: White; padding: 5px 5px 0 0">    
      <asp:Image ID="imgArrows3" runat="server" />
   </div>
   <div style="clear: both">
    </div>
 </div>
</asp:Panel>

<asp:Panel ID="pnlQC" runat="server" Height="0" Width="100%" CssClass="pnlCSS">                                <table id="grp16" runat="server" >
  <tr class="tdred">   
  </tr> 
  </table>
  </asp:Panel>
  <ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender4" runat="server"CollapseControlID="pnlClick3" Collapsed="true" ExpandControlID="pnlClick3" TextLabelID="lblMessage3"                                CollapsedText="Show" ExpandedText="Hide" ImageControlID="imgArrows3" CollapsedImage="~/Images/downarrow.jpg"                                ExpandedImage="~/Images/uparrow.jpg" ExpandDirection="Vertical" TargetControlID="pnlQC" ScrollContents="false">                            </ajaxToolkit:CollapsiblePanelExtender>

This is the Html code i used in my form and its working fine but if i click the first panel to expand , then the remaining two panels sholud be Collapsed .
Can any one suggest me how to Collapse the other panels when one panel is Expanded in asp.net .