The Accordion Component in the AJAX Control Toolkit

The ASP.NET 2.0 AJAX extensions can be downloaded from the Microsoft site. If you installed ATLAS make sure you remove it before running the executable to install the ASP.NET 2.0 AJAX Extensions. The message when you try to install the extensions will only tell you to remove the earlier version; it does not say ATLAS explicitly.

The Accordion

The Accordion is a component the like of which you have seen in my earlier article. It is basically a container for a number of panes. The pane has a header and  content. When the accordion is displayed on the web page, only the content of one of the panes will be displayed, along with the headers of the others. You could go to any of the other panels by clicking on one of the headers. This brings up the content of that header while closing the existing content. An example of the accordion from my earlier article which used the DOJO Toolkit 0.4.0 version is displayed in the next picture.

About this tutorial

This tutorial describes some of the features of the ACT as well as the AJAX extensions. The installation of the toolkit is described, followed by the procedure for designing an Accordion from scratch. The tutorial duplicates the design used in the earlier article, which means at the finish of the design, the result of that article is reproduced. The tutorial uses Visual Studio Professional Edition installed on a machine running Windows XP Professional Media Center Edition. The tutorial is developed side-by-side with the example site of the ACT.

The AJAX Extensions and the ACT Components

After installing the extensions, the folder was placed on the desktop and the solution file in the folder was brought up in VS 2005. The Trust Level ="medium" set by Microsoft for the sample web site precluded using the folder as a virtual directory.

The ACT Components

The various components that are bundled with the download are shown in the next picture.

The Accordion consists of three components: the Accordion, AccordionControlPanel and the AccordionPane. For the purposes of this tutorial the Accordion and the AccordionPane will be used. These components can be dragged from their location and dropped onto a web page, like all other Microsoft controls.