Using the Accordion control from the Ajax Control Toolkit

*.NET FAQs Unleashed!*

Using the Accordion control from the Ajax Control Toolkit

By Vishal Khanna

It looks smooth as silk. Use the Accordion control in your website wherever there are a few sections to display. Say you have 5 sections and you want to display one at a time, the best way to do this is using the Accordion control from the Ajax Control Toolkit. And since its Ajax, there is no postback. These sections may contain text, or may even contain server side controls.

To begin with, download the Ajax Control Toolkit DLL from the internet (which is absolutely free, a work of the ASP.NET community). Download link : http://www.codeplex.com/AjaxControlToolkit

Now place the DLL called AjaxControlToolkit.dll in the Bin Folder of your project. Make sure that this project is an Ajax-enabled project (in case not, add entries to your web.config).

Nothing more, simply look at the code below and try using it in your ASPX page.

<ajaxToolkit:Accordion

ID="MyAccordion3"

runat="Server"

SelectedIndex="0"

HeaderCssClass="ACHeader"

HeaderSelectedCssClass="ACHeader"

ContentCssClass=""

AutoSize="None"

FadeTransitions="true"

TransitionDuration="300"

FramesPerSecond="40"

RequireOpenedPane="false"

SuppressHeaderPostbacks="true">

<Panes>

<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server"

HeaderCssClass="ACHeader"

HeaderSelectedCssClass="ACHeaderSelected"

ContentCssClass="ACContent">

<Header> Criminal Attorneys</Header>

<Content> Contents for criminal attorneys, the expert group of lawyers out here. Go on

and on and on. Stop Crime!</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server"

HeaderCssClass="ACHeader"

HeaderSelectedCssClass="ACHeader"

ContentCssClass="accordionContent">

<Header> Property Attorneys</Header>

<Content> Contents for property attorneys out here. Your property

is stuck up in a legal battle, come here and we shall solve your legal problem.

Pay us, and leave the headache to us. </Content>

</ajaxToolkit:AccordionPane>

</Panes>

</ajaxToolkit:Accordion>

Thats all. Straight and simple, yet great effects.

Cheers!