The Accordion Component in the AJAX Control Toolkit

As mentioned earlier, the Accordion on this page will consist of three panes and duplicates the accordion shown in the first picture in this tutorial. The JAccordion.aspx page is added to the Sample Website that is bundled with the ACT download so that its reference to the AjaxControlToolkit.dll will be appropriate. Before any toolkit control can be placed on the page, you need to place the ScriptManager component form the AJAX Extension group on the page for reasons mentioned earlier. This can also be a drag and drop operation.

Now drag and drop an Accordion component from the ATC Components group (first item). This creates a tiny  UI on the design pane of your web page. It can be resized to any desired size. The JAccordion.aspx source appears as follows after the addition of the Accordion. It has the Script Manager and the Accordion Controls.

The AccordionPanes have to be added. Before adding the AccordionPanes, the Panes have to be added. You get drop-down help.  After the <ajaxToolkit:Accordion> tag, if you just type < and leave a space you will see the context menu as shown in the next picture. From this you choose the Panes in this case. You could also choose the templates for Content and Header. For this tutorial only "Panes" were chosen.

With the Panes added, you can now add the AccordionPanes. The next picture shows the changes to the code with the first AccordionPane being added. To this first AccordionPane a header as well as content were also added. You get a context sensitive drop-down menu here as well.

With this you may build the solution and bring up the JAccordion.aspx on the browser, which shows the following. This project is not hosted on the Internet server but on a folder where the unzipped AJAX extensions were placed. The program spawns a web server as seen in the address box.

In a similar fashion you may drag and drop two other AccordionPane Components between the panes after the AccordionPane already in place. They are given Header text to simulate the DOJO Accordion in the first picture. When the page with all three AccordionPanes is built and brought up on the browser, it appears as shown here.

You may also add content to the two other AccordionPanes as shown, simulating the DOJO Accordion. You will see a link added to the 'Hodentek' pane and a Calendar control from the Standard controls in the toolbox added to the 'ASPFree' pane. You have also added a few default colors for the backcolor property of the AccordionPanes. This is all that is necessary to get the accordion look and function like that created by the dojo widget as shown in the next picture.

Attributes of the Accordion

As seen earlier in the Object Browser there is rich functionality that can be used in creating the Accordion. The following attributes were added as shown in the next snippet for the Accordion.

<ajaxToolkit:Accordion
    ID="Accordion1" runat="server"
    ContentCssClass="accordionContent"
    HeaderCssClass="accordionHeader"
    TransitionDuration="200"
    AutoSize="Fill"
    FadeTransitions="true"
    SelectedIndex="0"
    Height="300px"
    Width="500px"
    BorderWidth="1px"
    BorderColor="DarkOrange">

The AutoSize property can have three values, None|Fill|Limit. When Fill is used the growth of the Accordion will be up to the Height attribute specified. The AccordionPanes added are indexed starting with the first (being 0), which if selected will be displayed. The transition time between Accordion Panes is set by the TransitionDuration, which is in milliseconds. With 200 ms set, the accordion panes still flutter in IE 7.0. The reader should seek out the object browser for many other attributes.