Click here to Skip to main content
13,138,791 members (53,598 online)
Click here to Skip to main content
Add your own
alternative version

Stats

152.7K views
3.6K downloads
19 bookmarked
Posted 4 Oct 2007

How To Use Accordion and Accordion Pane Controls in Ajax Toolkit

, 11 Oct 2007
Rate this:
Please Sign up or sign in to vote.
Accordion and Accordion Pane Controls add a really cool and sexy look and feel to your ASP.NET application.
Screenshot - aa.jpg

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

MussaratAziz
Web Developer
Pakistan Pakistan
No Biography provided

You may also be interested in...

Pro
Pro

Comments and Discussions

 
Questionbut I Am Getting this error Pin
irfanansari19-Apr-14 0:20
groupirfanansari19-Apr-14 0:20 
GeneralMy vote of 1 Pin
Lovee201029-May-11 7:13
memberLovee201029-May-11 7:13 
GeneralRe: My vote of 1 Pin
caronjudith9-Jan-14 19:27
membercaronjudith9-Jan-14 19:27 
GeneralMy vote of 1 Pin
Cameleon_170110-Jul-09 7:13
memberCameleon_170110-Jul-09 7:13 
QuestionOn Click event for accordian header Pin
goudaraghu12-Jan-09 20:46
membergoudaraghu12-Jan-09 20:46 
QuestionAccordion AJAX Control Pin
mojtaba fallah28-Jul-08 1:06
membermojtaba fallah28-Jul-08 1:06 
AnswerRe: Accordion AJAX Control Pin
lmnh28-Sep-10 22:08
memberlmnh28-Sep-10 22:08 
GeneralDemo Pin
Dewey5-Oct-07 21:34
memberDewey5-Oct-07 21:34 
GeneralRe: Demo Pin
MussaratAziz6-Oct-07 2:02
memberMussaratAziz6-Oct-07 2:02 
GeneralRe: Demo Pin
fwsouthern11-Oct-07 13:36
memberfwsouthern11-Oct-07 13:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170915.1 | Last Updated 11 Oct 2007
Article Copyright 2007 by MussaratAziz
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid