Ajax Slide Panel For Asp.Net

Clicking on the collapse/uncollapse button located to the left of the title will expand or shrink the panel. This action can also be tied to an event allowing you to alter the behavior or provide more feedback.
Clicking on "Collapse All" will dynamically collapse all the AsyncSlidePanels.
Clicking on "Uncollapse All" will dynamically uncollapse/expand all the AsyncSlidePanels.
Enter text into the text box, and use the radio buttons to select the slide panel that will be used, then click "Change the AsyncSlidePanel Title"
All above behaviors and actions can be customized.

AsyncSlidePanel 1

AsyncSlidePanel 2

Panel Two

Sed et eros. Pellentesque commodo arcu ac enim. Sed erat. Proin pretium justo a nibh. Ut porttitor neque quis arcu consectetuer mattis. Cras elementum blandit tortor. Integer varius tellus interdum velit. Maecenas a metus. Etiam ligula ipsum, ullamcorper sit amet, luctus quis, venenatis nec, dui. Donec porta tincidunt odio.

Sed ligula sapien, feugiat feugiat, lobortis et, volutpat ac, ante. Etiam id leo eu lectus placerat mollis. Maecenas purus sem, luctus at, bibendum non, egestas eu, nibh. Duis quis nibh. Pellentesque aliquam, diam id consequat sodales, orci purus ultricies lacus, sit amet egestas lacus nulla eu tortor. Nunc ac tellus at dui sodales aliquam. Proin commodo ultricies mi. Mauris at pede. Phasellus et purus non metus nonummy ultrices. In hac habitasse platea dictumst. Suspendisse malesuada massa ut pede. Duis sed justo in lacus elementum gravida. Sed sapien. Mauris at odio. Nam eget ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus vulputate ultricies metus. Cras turpis neque, hendrerit eu, viverra aliquam, luctus eget, nisl. Pellentesque adipiscing accumsan leo.

AsyncSlidePanel 3

Panel One Panel Two Panel Three

The AsyncSlidePanel is an Async-Enabled collapsable server control.

Collapse and Uncollapse the panel during an AsyncCallback.
Change the title during an AsyncCallback.
Allow you to easily receive OnCollapsePanel and OnUnCollapsePanel events.
Can be scrolled into view during an AsyncCallback.
Functions as a regular server control if the browser does not support asynchronus operations, allowing you to support legacy browsers.
Its an AsyncWebControl, which means that you can change it's visibility, CSS class, Left/Top coordinate, Width/Height, and ForeColor/BackColor, during an AsyncCallback.

<%@ Register Assembly="AsyncControls" Namespace="DelvingWare.AsyncControls" TagPrefix="dw" %>

<dw:AsyncSlidePanel runat="server" ID="sldMain" 
Title="AsyncSlidePanel 1"
Width="490"
DefaultStyle="false" 
CssClass="asyncSlidePanel1" 
TitleBarCssClass="spTitleBar"
CollapsedImageUrl="../images/open.png" 
UncollapsedImageUrl="../images/close.png">

</dw:AsyncSlidePanel>

<dw:AsyncSlidePanel runat="server" ID="sldMain2" 
Title="AsyncSlidePanel 2"
Collapsed="false"
Width="490"
DefaultStyle="false" 
CssClass="asyncSlidePanel2"
TitleBarCssClass="spTitleBar"
CollapsedImageUrl="../images/open.png" 
UncollapsedImageUrl="../images/close.png">

</dw:AsyncSlidePanel>

<dw:AsyncSlidePanel runat="server" ID="sldMain3" 
Title="AsyncSlidePanel 3"
Width="490"
DefaultStyle="false" 
CssClass="asyncSlidePanel3"
TitleBarCssClass="spTitleBar"
CollapsedImageUrl="../images/open.png" 
UncollapsedImageUrl="../images/close.png">

</dw:AsyncSlidePanel>
<br/>

<dw:AsyncButton runat="server" ID="btCollapseAll" 
OnClick="btCollapsAll_Click" 
Text="Collapse All"
CssClass="greyButton" />

<dw:AsyncButton runat="server" ID="btUncollapseAll" 
OnClick="btUncollapseAll_Click" 
Text="Uncollapse All"
CssClass="greyButton" />
<p>
<dw:AsyncTextBox runat="server" ID="txtMain"
MaxLength="10"
EnableValidation="Enabled"
ErrorMessage="Please enter a name."
ErrorMessageCssClass="errorMsg" />

<dw:AsyncButton runat="server" ID="btTitle"
Text="Change the AsyncSlidePanel Title"
OnClick="btTitle_Click"
CssClass="greyButton"
CausesValidation="true" />
    
<dw:AsyncLabel runat="server" ID="lblMain" RenderMode="bold"/>

<br/>
<dw:AsyncRadioButton runat="server" ID="rbOne"
Checked="true"
Text="Panel One" />

<dw:AsyncRadioButton runat="server" ID="rbTwo"
Text="Panel Two" />

<dw:AsyncRadioButton runat="server" ID="rbThree"
Text="Panel Three" />
</p>

using System;
using DelvingWare.AsyncControls;
...
protected void Page_Load( object sender, EventArgs e )
{
    // enable slide panel usage
    AsyncPage.Invocation.EnableAsyncSlidePanel = true;
}

protected void btCollapsAll_Click( object sender, AsyncEventArgs ae )
{
    // collapse the AsyncSlidePanels
    sldMain.Collapse();
    sldMain2.Collapse();
        sldMain3.Collapse();
}

protected void btUncollapseAll_Click( object sender, AsyncEventArgs ae )
{
    // uncollapse the AsyncSlidePanels
    sldMain.Uncollapse();
    sldMain2.Uncollapse();
        sldMain3.Uncollapse();
}

protected void btTitle_Click( object sender, AsyncEventArgs ae )
{
    if ( !txtMain.IsValid )
        return;

    string title = txtMain.Text;

    // change the title of the respective slide panel
    if ( rbOne.Checked )
        sldMain.Title = title;
    else if ( rbTwo.Checked )
        sldMain2.Title = title;
    else if ( rbThree.Checked )
        sldMain3.Title = title;
}

Imports System
Imports DelvingWare.AsyncControls
...

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    ' enable slide panel usage
    AsyncPage.Invocation.EnableAsyncSlidePanel = true
End Sub

Protected Sub btCollapsAll_Click(ByVal sender As Object, ByVal ae As AsyncEventArgs)
    ' collapse the AsyncSlidePanels
    sldMain.Collapse
    sldMain2.Collapse
    sldMain3.Collapse
End Sub

Protected Sub btUncollapseAll_Click(ByVal sender As Object, ByVal ae As AsyncEventArgs)
    ' uncollapse the AsyncSlidePanels
    sldMain.Uncollapse
    sldMain2.Uncollapse
    sldMain3.Uncollapse
End Sub

Protected Sub btTitle_Click(ByVal sender As Object, ByVal ae As AsyncEventArgs)
    If Not txtMain.IsValid Then
        Return
    End If
    Dim title As String = txtMain.Text
    ' change the title of the respective slide panel
    If rbOne.Checked Then
        sldMain.Title = title
    ElseIf rbTwo.Checked Then
        sldMain2.Title = title
    ElseIf rbThree.Checked Then
        sldMain3.Title = title
    End If
End Sub

.asyncSlidePanel1 

{
    font-family: Verdana, Arial, Serif;
    font-size: 9pt;
    border: 1px solid #777;
}
.asyncSlidePanel2 

{
    font-family: Verdana, Arial, Serif;
    font-size: 9pt;
    border: 1px solid #777;
    border-top: 0px;
}
.asyncSlidePanel3 

{
    font-family: Verdana, Arial, Serif;
    font-size: 9pt;
    border: 1px solid #777;
    border-top: 0px;
}
.spContent 

{
    background-image: url("images/gradSlash.gif");
    background-repeat: repeat-x;
}
.asyncSlidePanel1 p, .asyncSlidePanel2 p, .asyncSlidePanel3 p

{
    padding: 1.5em;
}
.asyncSlidePanel1 h4, .asyncSlidePanel2 h4, .asyncSlidePanel3 h4

{
    margin-left: 20px;
}
.asyncslidepanelcollapsebt 

{
    width: 13px;
    height: 13px;
    position: relative;
    top: 3px;
    padding-right: 10px;
}
.spTitle 

{
    padding-left: 20px;
    display: inline;
    font-size: 10pt;
}
.spTitleBar 

{
    padding-left: 5px;
    background-image: url("images/spGrad.gif");
    background-repeat: repeat-x;
    height: 20px;
    border-bottom: 1px solid #777;
}