ASP.NET AJAX CollapsiblePanelExtender - How can I change the vertical expand direction?

1.7k Views Asked by At

I am using a collapsible panel extender on a shopping page. I am using it to show/hide special offers. The panel containing these is fixed at the bottom of the page. I have the panel working (expanding and contracting), but I need to change the panel to make it collapse downward instead of upward. The default collapse behavior is to collapse upward. This causes a problem for me because there is a gap between the special offers panel and the bottom of the page after collapsing the panel.

My code is below:

<!--teaser panel-->
    <asp:UpdatePanel ID="upTeaser" runat="server" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="lbShowHideTeaserPanel" EventName="Click"/>
        </Triggers>
        <ContentTemplate>
            <asp:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server"
             TargetControlID="pnlTeaserContainer" 
             VerticalSide="Bottom" 
             HorizontalSide="Center"
             ScrollEffectDuration=".1"
             >
            </asp:AlwaysVisibleControlExtender>
            <asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" CollapseControlID="lbShowHideTeaserPanel"
                CollapsedText="[+] Show Special Offers" ExpandControlID="lbShowHideTeaserPanel"
                ExpandedText="[-] Hide Special Offers" TargetControlID="pnlTeaserContent" TextLabelID="lbShowHideTeaserPanel"
                SuppressPostBack="true" >
            </asp:CollapsiblePanelExtender>
            <asp:Panel ID="pnlTeaserContainer" runat="server" CssClass="teaserContainer">
                <asp:Panel ID="pnlTeaserCollapser" runat="server">
                    <div style="text-align:right;">
                        <asp:LinkButton ID="lbShowHideTeaserPanel" runat="server" 
                        OnClick="lbShowHideTeaserPanel_Click"  
                        Text="[-] Hide Special Offers" style="color:#ff761b;" ></asp:LinkButton>
                    </div>
                </asp:Panel>
                <asp:Panel ID="pnlTeaserContent" runat="server" Visible="true">
                    <asp:Literal ID="litTeaserText" runat="server"></asp:Literal>
                </asp:Panel>
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
    <!--end teaser panel-->

Basically what I need to do is something to prevent the gap from appearing under the panel after it collapses upward; something akin to "CollapseDirection="up", OR make the panel reposition to the bottom of the screen after collapse if changing the collapse direction is not possible.

Thanks!

0

There are 0 best solutions below