How To Use Accordion and Accordion Pane Controls in Ajax Toolkit

• Download demo project - 527.43 KB

Introduction

You can use Accordion and Accordion Pane Controls to add a really cool and sexy look and feel to your ASP.NET application. I will teach you how to use these controls into your Ajax enabled ASP.NET application.

Now let's start.

Before you start, check if you have installed the ASP.NET Ajax extension 1.0 and Ajax Controls Toolkit. You can download them from here.

Steps

1. Open Visual Studio 2005. 
2. Select ASP.NET Ajax Enabled Website from Website project templates.
3. Switch to your design mode.You will see the Script Manager Control on your Page.
   Just don't bother about it. 
4. Add an Update Panel from Ajax Extension ToolBox Tab. 
5. Now you will see that Update Panel will be added to your Page. 
6. Select that Update Panel Control. 
7. Now add Accordion Control from Ajax Control if you have added Ajax Controls already. If not, then right click on your toolbox, select Add Tab. Name it Ajax Controls, and then again right click inside that newly created Tab and choose New Item, then Locate your AjaxControlToolKit Directory from your hard drive and follow this C:\AjaxControlToolKit\SampleWebsite\bin (this is my path, yours may be different). Now you will see a DLL named AjaxControlToolKit.dll and click Ok.
8. Controls will be added. 
9. Now add the following lines.

Code

<cc1:AccordionID="Accordion1" runat="server"
 SelectedIndex="0" FadeTransitions="true"
 FramesPerSecond="40"TransitionDuration="250"
 AutoSize="None"ContentCssClass="Content" HeaderCssClass="HEADER" > 
<Panes>

<cc1:AccordionPane
ID="AccordionPane2" runat="server"> 

<Header> 
<a href=""onclick="return false;" class="Link" > 
Open 
</a> 
</Header> 
<Content> 
<div> 
First Content Area First Content AreaFirst Content Area First Content Area 
First Content Area</div> 
</Content> 
</cc1:AccordionPane> 
<cc1:AccordionPaneID="AccordionPane1" runat="server"> 
<Header> 
<a href=""onclick="return false;" class="Link" > 
Open 
</a> 
</Header> 
<Content> 
<div> 
Second Content Area Second ContentArea Second Content Area Second Content 
	Area Second Content Area 
</div> 
</Content> 
</cc1:AccordionPane> <cc1:AccordionPaneID="AccordionPane3" runat="server"> 
<Header> 
<a href=""onclick="return false;" class="Link" > 
Open 
</a> 
</Header> 
<Content> 
<div> 
Third Content Area Third Content AreaThird Content Area Third Content 
	Area Third Content Area 
</div> 
</Content> 
</cc1:AccordionPane> <cc1:AccordionPaneID="AccordionPane4" runat="server"> 
<Header> 
<a href=""onclick="return false;" class="Link" > 
Open 
</a> 
</Header> 
<Content> 
<div> 
Fourth Content Area Fourth Content AreaFourth Content Area 
Fourth Content Area Fourth Content Area 
</div> 
</Content> 
</cc1:AccordionPane> 
</Panes>
</cc1:Accordion> 

I have included the *.css file and the source code. You can download it from the link at the top of this article and have a look at it. Hopefully this will help you understand Accordion control with Ajax.NET.

Visit http://www.exposecode.com.