在asp.net中展开一个面板时如何折叠面板 [英] How to Collapse panel's when one panel is Expand in asp.net

问题描述

朋友，

看下面的代码.

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>

这是我在表单中使用的HTML代码，可以正常使用，但是如果我单击第一个面板以展开，则其余两个面板将被折叠.
在asp.net中展开一个面板时，有人能建议我如何折叠其他面板吗?

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 .

推荐答案

当您使用Ajax时，为什么不选择手风琴控制板.它很容易实现.
你不需要冒险

您要做的是将标题添加到手风琴窗格的标签中，并将内容添加到< content>中.手风琴面板标签

while you are using ajax, why dont you go for accordion panel. its simple to implement.
you dont need to take risk

the thing you have to do is add the headings in tag of accordion pane, and content in <content> tag of accordion panel

使用ajax可折叠面板可以解决您的问题

use ajax collapsible panel it resolved your problem

这篇关于在asp.net中展开一个面板时如何折叠面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！