title: ASP.NET AJAX CollapsiblePanelExtender - How can I change the vertical expand direction?
body: <p>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.</p>
  
  <p>My code is below:</p>
  
  <pre><code>&lt;!--teaser panel--&gt;
      &lt;asp:UpdatePanel ID="upTeaser" runat="server" UpdateMode="Conditional"&gt;
          &lt;Triggers&gt;
              &lt;asp:AsyncPostBackTrigger ControlID="lbShowHideTeaserPanel" EventName="Click"/&gt;
          &lt;/Triggers&gt;
          &lt;ContentTemplate&gt;
              &lt;asp:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server"
               TargetControlID="pnlTeaserContainer" 
               VerticalSide="Bottom" 
               HorizontalSide="Center"
               ScrollEffectDuration=".1"
               &gt;
              &lt;/asp:AlwaysVisibleControlExtender&gt;
              &lt;asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" CollapseControlID="lbShowHideTeaserPanel"
                  CollapsedText="[+] Show Special Offers" ExpandControlID="lbShowHideTeaserPanel"
                  ExpandedText="[-] Hide Special Offers" TargetControlID="pnlTeaserContent" TextLabelID="lbShowHideTeaserPanel"
                  SuppressPostBack="true" &gt;
              &lt;/asp:CollapsiblePanelExtender&gt;
              &lt;asp:Panel ID="pnlTeaserContainer" runat="server" CssClass="teaserContainer"&gt;
                  &lt;asp:Panel ID="pnlTeaserCollapser" runat="server"&gt;
                      &lt;div style="text-align:right;"&gt;
                          &lt;asp:LinkButton ID="lbShowHideTeaserPanel" runat="server" 
                          OnClick="lbShowHideTeaserPanel_Click"  
                          Text="[-] Hide Special Offers" style="color:#ff761b;" &gt;&lt;/asp:LinkButton&gt;
                      &lt;/div&gt;
                  &lt;/asp:Panel&gt;
                  &lt;asp:Panel ID="pnlTeaserContent" runat="server" Visible="true"&gt;
                      &lt;asp:Literal ID="litTeaserText" runat="server"&gt;&lt;/asp:Literal&gt;
                  &lt;/asp:Panel&gt;
              &lt;/asp:Panel&gt;
          &lt;/ContentTemplate&gt;
      &lt;/asp:UpdatePanel&gt;
      &lt;!--end teaser panel--&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Thanks!</p>