ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. However, AJAX isn't just for ASP.NET. You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers.

CollapsiblePanel Description

The CollapsiblePanel is a very flexible extender that allows you to easily add collapsible
sections to your web page. This extender targets any ASP.NET Panel control. The page developer
specifies which control(s) on the page should be the open/close controller for the panel, or the
panel can be set to automatically expand and/or collapse when the mouse cursor moves in or out
of it, respectively.

The panel is also post-back aware. On a client postback, it automatically remembers and restores
its client state. This demonstrates the ability of these extenders to have some communication
between the client and the server code. Click
here to cause a postback.

The page developer can specify whether the panel should scroll when it does not expand to the full
size of its contents, and can also specify whether the panel expands in the height or width dimensions.

Note: CollapsiblePanel assumes that the standard CSS box model is being used. Early versions of
Internet Explorer
didn't support that model completely,
so please use the !DOCTYPE declaration (as found at the top
of this page and enabled by default for new ASP.NET pages) to specify that the page should be rendered
in IE's standards-compliant mode.

CollapsiblePanel Properties

The control above is initialized with this code. The italic properties are optional:

CollapsedSize - The size of the target, in pixels, when it is in the collapsed state.

ExpandedSize - The size of the target, in pixels, when it is in the opened state.

Collapsed - Specifies that the object should initially be collapsed or expanded.
Set this to match your initial size. In this case, we initially set the panel to a height of 0 to
match the CollapsedSize property, so when the page first renders, we don't see the panel expanded.

AutoCollapse - True to automatically collapse when the mouse is moved off the panel.

AutoExpand - True to automatically expand when the mouse is moved over the panel.

ScrollContents - True to add a scrollbar if the contents are larger than the panel
itself. False to just clip the contents.

ExpandControlID/CollapseControlID - The controls that will expand or collapse the panel
on a click, respectively. If these values are the same, the panel will automatically toggle its state on
each click.

TextLabelID - The ID of a label control where the "status text" for the panel will be
placed. The panel will replace the internal HTML of this control (e.g. any HTML between the tags).

CollapsedText - The text to show in the control specified by TextLabelID when the panel
is collapsed. This text is also used as the alternate text of the image if ImageControlID is set.

ExpandedText - The text to show in the control specified by TextLabelID when the panel is
opened. This text is also used as the alternate text of the image if ImageControlID is set.

ImageControlID - The ID of an Image control where an icon indicating the collapsed status
of the panel will be placed. The extender will replace the source of this Image with the CollapsedImage
and ExpandedImage urls as appropriate. If the ExpandedText or CollapsedText properties are set, they are
used as the alternate text for the image.

CollapsedImage - The path to an image used by ImageControlID when the panel is collapsed

ExpandedImage - The path to an image used by ImageControlID when the panel is expanded

ExpandDirection - can be "Vertical" or "Horizontal" to determine whether the panel expands
top-to-bottom or left-to-right.