Follow the easy steps below to create your solution.
1.
Start your Visual Studio 2005 IDE.
2.
Choose Create Web Site from the menu.
3.
In this sample application we will use the Visual Basic language for the
sample application.
4. Name
the solution CollapsiblePanelSample.
5.
Choose ASP.NET AJAX Control Toolkit Web Site.
6.
Choose File System in the location box.
7.
Click ok to create the project.
8.
Visual Studio will create your project with a Default.aspx
page and most likely a readme.txt. Go ahead and get rid of the latter file.
9.
Open Default.aspx page in design view.
10. You
noticed that there is a control on the page already called script manager.
(Well, AJAX is really a script based implementation of the language
JavaScript). In short, ScriptManager Control manages client script for
Microsoft ASP.NET AJAX pages. By default, the Script Manager control registers
the script for the Microsoft AJAX Library with the page. This enables client
script to use the type system extensions and to support features such as
partial-page rendering and Web-service calls.
11. Now
you have to fill your page with some text. In order to do so, take Listing 1
and copy and paste it many times inside the div tag within the default.aspx
page when in source mode.
12. Create
a new item in the solution of type Style Sheet and leave the default name.
13. Listing
1 contains the style sheet content that should be placed inside the file. You
can copy and paste directly.
Listing 1- Style Sheet Content for
our example
.collapsePanel {
width: 640px;
height:0px;
background-color:white;
overflow:hidden;
}
.collapsePanelHeader{
width:640px;
height:20px;
color: Yellow;
background-color: Black;
font-weight:bold;
float:none;
padding:5px;
cursor: pointer;
vertical-align: middle;
}14. Go
to the source mode, and click and drop the style sheet file into the header section
of the default web form in order to be able to reference it.
15. Now,
drag two panels from the standard toolbox and drop them on the page.
16. Name
the first panel PnlTitle and delete the height and width specs then create a
CssClass tag with value collapsePanelHeader like in listing 2.
Listing 2- Title Panel and Content Panel Format
<asp:Panel ID="PnlTitle" runat="server" CssClass="collapsePanelHeader">
<asp:Panel ID="PnlContent" runat="server" CssClass="collapsePanel">
17. Name
the second panel PnlContent and delete the height and width specs then create a
CssClass tag with value collapsePanel like in the above listing.
18. In
the title panel add an asp image standard control (it is necessary to use the
image asp control in order to be able to control it afterwards). Make the image
url point to an image that you create with a down arrow (call the image
collapse_blue.jpg to be able to use it later). Also, create another image with
an up arrow (call the image expand_blue.jpg to be able to use it later).
19. After the image
control, add a text in bold that says: Who Am I?
20. Now drag a label and make the text tag Show Details (…)
21. Please
fill the content panel with some information about yourself in any html format.
22. Place
the cursor after the script manager html end tag. From the Toolbox drag a Collapsible
Panel control and set the properties as specified in Listing 3.
Listing 3- Collapsible Panel Extender specs
<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1"
runat="server" TargetControlID="PnlContent" ExpandControlID="PnlTitle"
CollapseControlID="PnlTitle" TextLabelID="Label1"
CollapsedText="Show Details (...)" ExpandedText="Hide Details (...)"
ImageControlID="Image1" ExpandedImage="images/collapse_blue.jpg"
CollapsedImage="images/expand_blue.jpg"
Collapsed="True" SuppressPostBack="true">
</ajaxToolkit:CollapsiblePanelExtender>
23. Please
note that some of these properties cannot be specified using the normal
properties window. The target control ID specifies the control to collapse and
extend (the content panel in our case).
24. The
Expand Control ID specifies the control that is going to control the expansion
(the title panel in our case).
25. The
Collapse Control ID specifies the control that is going to collapse the panel
(the title panel in our case).
26. Please
note that you can specify two different controls to collapse and expand.
27. The
Text Label ID specifies that label that is going change its text caption when
the user collapses or expands the panel.
28. The
same description applies the Image Control ID, but the image is going to
change.
29. The
Collapsed Text tag specifies the text that should appear when the panel is
collapsed.
30. The
Expanded Text tag specifies the text that should appear when the panel is
extended.
31. The
Expanded Image tag specifies the image to display when the panel is expanded.
32. The
Collapsed Image tag specifies the image to display when the panel is collapsed.
33. The
Collapsed tag specifies the state of the content panel when the page loads.
34. The
Suppress Post Back tag specifies that when expanding the panel, there should be
no posting to the server or not. In our case and since our content is fixed and
not changing, we did set this property to true.
