Article: Adding an AJAX Collapsible Panel
Description: This tutorial/topic shows you how to add an AJAX CollapsiblePanelExtender to your ASP.Net page.
Notes: It is assumed you have already AJAX enabled your web project.
1. You must have the following DOCTYPE declaration on your page or in your MasterPage.
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If implementing in older pages, you might need to use this DOCTYPE:
DOCTYPE html PUBLIC "-//W3C\\DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2. Add an AJAX script manager to the top of your ASP.Net page, just below your
<asp:Content> element.
3. Next create a
<div> section to put the following sections into.
4. Add the following
<div> and <panel> elements for the content you want to make collapsible:
<div id="ExpandableContent" class="collapseTargetPanel">
<asp:Panel ID="ContentPanel" runat="server" Height="0px" Width="100%">
<p>
Whatever you want for content
p>
asp:Panel>
div>
5. Add the following section to create the Collapsible Panel Title bar. Put this just above the panel you created in step 4.
<div id="ExpandableTitleBar" class="collapsePanel">
<asp:Panel ID="TitlePanel" runat="server" Height="23px" Width="100%">
<div style="padding:5px; cursor:hand; vertical-align:middle;">
<div style="float:left; vertical-align:middle;">
<asp:Image ID="ImageToControl" runat="server" ImageUrl="Images/expand.jpg"/>
div >
<div style="float:left;">
What's New...
div >
<div style="float:right; margin-left:20px">
<asp:Label ID="TextToControl runat="server" Text="">asp:Label>
div >
div>
asp:Panel>
div>
6. Add the following section to create the Collapsible Panel Extender. Put this just above the section you created in step 5.
<AjaxToolkit:CollapsiblePanelExtender
ID="TitlePanel"
runat="server"
TargetControlID="ContentPanel"
ExpandControlID="TitlePanel"
Collapsed="false"
TextLabelID="TextToControl"
ExpandedText=""
CollapsedText=""
ImageControlID="ImageToControl"
ExpandedImage="Images/collapse.jpg"
CollapsedImage="Images/expand.jpg"
SuppressPostBack="False"
CollapseControlID="TitlePanel">
AjaxToolkit:CollapsiblePanelExtender>
7. You can use the following CSS classes to help define your content:
.collapsePanel
{
font-size:medium;
color:#000099;
font-weight:bold;
}
.collapseTargetPanel
{
background-color:Transparent;
padding-left:7px;
font-size: 0.8em;
}
8. Sometimes, your CSS will not work with the new AJAX Controls/Extenders. To have your markup controlled by CSS, you will need to do the following:
a. Create a "Theme" folder.
b. Add a folder to the "Theme" folder called "Default".
c. Add a "Default" stylesheet to the folder in step 8b.
d. Within the stylesheet, add your css elements.
e. On your page where you are adding the AJAX controls, you'll need to add the theme in the PreInit method for the page. See example below:
VB.NET
Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit
Page.Theme = "Default"
End Sub
C#
protected void Page_PreInit(object sender, EventArgs e)
{
Page.Theme = "Default";
}
f. In your
<head> element on your page, make sure you add
runat="server" g. Add the class attribute to your element tabs to get the css formatting.