Ajax Control Toolkit CollapsiblePanel expands all controls on the page

Question

I currently have two ListView controls in my code, one that will display a product and another that displays the different product variations with prices. My Collapsible panel is placed inside the second ListView. When the first collapsible panel is clicked on the loaded web page all the collapsible panels are expanded(closing also works). Further more when clicking on any other collapsible panels(besides the first panel) nothing will occur. I have tried assigning id's to the targeted panel and get an error message saying id's cannot be assigned to controls at runtime.

Here is some sample code of the second listview:

<LayoutTemplate>

<asp:Panel ID="pnlMoreProducts" runat="server" >
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>                            
</asp:Panel>

<div id="productCollDiv" class="productCollPanel">
<asp:Label ID="lblCollPanel" CssClass="lblCollPanel" runat="server" ></asp:Label>
                        </div>

<ajaxToolkit:CollapsiblePanelExtender ID="cpeMoreProducts" AutoCollapse="false" runat="server" TargetControlID="pnlMoreProducts"
                            CollapsedSize="0" Collapsed="true" TextLabelID="lblCollPanel" CollapsedText="Show More Products" ExpandedText="Hide Products"
                            ExpandDirection="vertical" ExpandControlID="productCollDiv" CollapseControlID="productCollDiv" SuppressPostBack="true" />
                    </LayoutTemplate>

Any help would be appreciated. Thanks.

Answer 1

Try it with this template:

<asp:Panel ID="pHeader1" runat="server" CssClass="cpHeader">
    <asp:Label ID="lblHeaderText1" runat="server" />
</asp:Panel>
<asp:Panel ID="pBody1" runat="server" CssClass="cpBody">
    <asp:Label ID="lblBodyText1" runat="server" />
</asp:Panel>
<act:CollapsiblePanelExtender ID="cpe1" runat="server" TargetControlID="pBody1" CollapseControlID="pHeader1"
    ExpandControlID="pHeader1" Collapsed="false" TextLabelID="lblHeaderText1" CollapsedText="Open..."
    ExpandedText="Close..." CollapsedSize="0" ExpandedSize="200"
    ScrollContents="true">
</act:CollapsiblePanelExtender>

<asp:Panel ID="pHeader2" runat="server" CssClass="cpHeader">
    <asp:Label ID="lblHeaderText2" runat="server" />
</asp:Panel>
<asp:Panel ID="pBody2" runat="server" CssClass="cpBody">
    <asp:Label ID="lblBodyText2" runat="server" />
</asp:Panel>
<act:CollapsiblePanelExtender ID="cpe2" runat="server" TargetControlID="pBody2" CollapseControlID="pHeader2"
    ExpandControlID="pHeader2" Collapsed="false" TextLabelID="lblHeaderText2" CollapsedText="Open..."
    ExpandedText="Close..." CollapsedSize="0" ExpandedSize="200"
    ScrollContents="true">
</act:CollapsiblePanelExtender>