Hello,
this is the first time I am trying to get my hands wet implementing Ajax into an existing website. I installed the AJAX extenstions for .NET 2.0 VS 2005, and downloaded the toolkit. I watched the video on how to add a collapsible panel and I searched many discussion boards but cannot find the resoltuion to my problem.
Problem: I have created the two panels, 1 panel is title, the other is the content. In the content panel I added a literal tag that gets populated on page load with an html document. BTW I tried just using plain text w/out the literal and problem still occurs. When I open my page, I see the content visible (don't want to see this), and when I click on the hide link, the content is still visible, when I click on it again I see that it does a brief postback and quickly closes and content appears again (doesn't stay closed). I am not sure what I am doing wrong, but I cannot get the collapsible extender to work. It does not hide my content or even stay hidden when I open this page. The weird thing is that everytime I click on the text in the title panel, that changes correctly, but nothing happens to the content. Below is the code I am trying to get to work:
<
body>
<form id="form1" runat="server" class="content">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:Panel ID="pnlAcctDiscHeader" runat="server">
<asp:Label ID="lblShow" runat="server" Text="Account Agreement & Disclosures Statement (Display Details...)"></asp:Label>
</asp:Panel>
<asp:Panel ID="pnlContent" runat="server" CssClass="collapsePanel"> --BTW the collapsePanel is set to height:0px and overflow:hidden;
<asp:Literal ID="ltlAcctDiscPnl" runat="server"></asp:Literal>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
Collapsed="true" TextLabelID="lblShow" ExpandedText="Account Agreement & Disclosures Statement (Hide Details...)"
CollapsedText="Account Agreement & Disclosures Statement (Display Details...)" SuppressPostBack="true"
ExpandControlID="pnlAcctDiscHeader" CollapseControlID="pnlAcctDiscHeader"
TargetControlID="pnlContent" ScrollContents="True"
ExpandDirection="Vertical"
CollapsedSize="0">
</ajaxToolkit:CollapsiblePanelExtender>
</div>
When I look at the souce code this is the js that gets generated, not sure if this looks right or not:
<script type="text/javascript">
<!--
Sys.Application.initialize();
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.CollapsiblePanelBehavior, {"ClientStateFieldID":"CollapsiblePanelExtender1_ClientState","CollapseControlID":"pnlAcctDiscHeader","Collapsed":true,"CollapsedSize":0,"CollapsedText":"Account Agreement & Disclosures Statement (Display Details...)","ExpandControlID":"pnlAcctDiscHeader","ExpandedText":"Account Agreement & Disclosures Statement (Hide Details...)","ScrollContents":true,"SuppressPostBack":true,"TextLabelID":"lblShow","id":"CollapsiblePanelExtender1"}, null, null, $get("pnlContent"));
});
// -->
</script>
Your help is very much appreciated!