multiple collapsiblepanel problem in asp.net
I have an aspx page that contains a number of collapsiblepanels and I want the user to only be able to expand one at a time - so if panel1 is expanded then panel2 and panel3 close automatically. Is there anyway to do this?
<asp:button runat="server" id="btn1" text="test1"/>
<asp:button runat="server" id="btn2" text="test2"/>
<asp:button runat="server" id="btn3" text="test3"/>
<asp:penel id="pnl1" runat="server"&g开发者_JAVA技巧t;Panel 1 content</panel>
<asp:CollapsiblePanelExtender ID="cpe1" runat="Server" TargetControlID="pnl1"
ExpandControlID="btn1" CollapseControlID="btn1" Collapsed="True"/>
<asp:penel id="pnl2" runat="server">Panel 2 content</panel>
<asp:CollapsiblePanelExtender ID="cpe2" runat="Server" TargetControlID="pnl2"
ExpandControlID="btn2" CollapseControlID="btn2" Collapsed="True"/>
<asp:penel id="pnl3" runat="server">Panel 3 content</panel>
<asp:CollapsiblePanelExtender ID="cpe3" runat="Server" TargetControlID="pnl3"
ExpandControlID="btn3" CollapseControlID="btn3" Collapsed="True"/>
open one panel at a time first give behaviorID to each collapsible panel and use javascript to close all other then current on OnClientClick event.
<script type="text/javascript">
function closePanel(con1,con2) {
$find(con1)._doClose();
$find(con2)._doClose();}
</script>
<asp:button OnClientClick="closePanel('colps2','colps3');" runat="server" id="btn1" text="test1"/>
<asp:button OnClientClick="closePanel('colps1','colps3');" runat="server" id="btn2" text="test2"/>
<asp:button OnClientClick="closePanel('colps1','colps2');" runat="server" id="btn3" text="test3"/>
<asp:penel id="pnl1" runat="server">Panel 1 content</panel>
<asp:CollapsiblePanelExtender ID="cpe1" runat="Server" TargetControlID="pnl1"
ExpandControlID="btn1" CollapseControlID="btn1" Collapsed="True" BehaviorID="colps1"/>
<asp:penel id="pnl2" runat="server">Panel 2 content</panel>
<asp:CollapsiblePanelExtender ID="cpe2" runat="Server" TargetControlID="pnl2"
ExpandControlID="btn2" CollapseControlID="btn2" Collapsed="True" BehaviorID="colps2"/>
<asp:penel id="pnl3" runat="server">Panel 3 content</panel>
<asp:CollapsiblePanelExtender ID="cpe3" runat="Server" TargetControlID="pnl3"
ExpandControlID="btn3" CollapseControlID="btn3" Collapsed="True" BehaviorID="colps3"/>
精彩评论