Working with Accordion AJAX Control
 
Published: 28 Sep 2007
Abstract
This article demonstrates the Accordion Control from the ASP.NET AJAX Control Toolkit through a step-by-step project implementation.
by Nidal Arabi
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 90179/ 95

Introduction

There are series of controls (Extenders or simply first class control) in the AJAX control Toolkit. One of them is of particular interest in this article, the Accordion control. This control would enrich your website and gives it a professional look. In addition, the Accordion control of presenting large amount of information in a relatively small space.

Accordion and Accordion Pane(s)

It is time to enrich your web page. The accordion control is composed of parent control and multiple child controls called accordion panes. This accordion control is fully customizable in the sense of the design as well as the contents.

Requirements

In order to be able to work with AJAX ASP.NET Control Toolkit, the following should be available:

·         Microsoft Visual Studio 2005 or you can also use the Visual Web Developer Express 2005 (offered for free from Microsoft on http://msdn.microsoft.com/express)

·         Download AJAX extensions from http://ajax.asp.net and install them on your computer after installing Visual studio.

·         Download AJAX control toolkit from http://ajax.asp.net link to code project or directly from code project (it is a zip file).

·         After download, open Visual Studio or Visual Web Developer and add a tab in the Toolbox named AJAX Toolkit.

·         Right Click in this tab and choose add items. Browse to the sample directory of where you did extract the toolkit and then to bin directory and choose the DLL.

·         This is all. You have AJAX control Toolkit installed and you can start building your controls.

Well, you should be ready by now to begin AJAX Toolkit implementation.

Creating Your Accordion Solution

Follow the easy steps below to create your solution.

1.    Start your Visual Studio 2005 IDE

2.    Choose Create Web Site from the menu

3.    In this sample application we will use the Visual Basic language for the sample application

4.    Name the solution AccordionSample

5.    Choose ASP.NET AJAX Control Toolkit Web Site

6.    Choose File System in the location box

7.    Click OK to create the project

8.    Visual Studio 2005 will create your project with a Default.aspx page and most probably a readme.txt. Go ahead, get rid of the latter file.

9.    Open Default.aspx page in design view.

10. You noticed that there is a control on the page already called Script Manager. (Well, AJAX is really a script based implementation of the language JavaScript). In Short, Script Manager control manages client script for Microsoft ASP.NET AJAX pages. By default, the Script Manager control registers the script for the Microsoft AJAX Library with the page. This enables client script to use the type system extensions and to support features such as partial-page rendering and Web-service calls.

11. Now drag a Accordion Control from the Toolkit and drop it on the form in design mode.

12. It is preferable if you create a style sheet as included in Listing 1. (If you do not create this style sheet, you will end up with an accordion with no color unless you go and specify every style item by yourself).

Listing 1 - StyleSheet.css content

/* Accordion */
.accordionHeader
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #2E4d7B;
      font-family: Arial, Sans-Serif;
      font-size: 12px;
      font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}
 
#master_content .accordionHeader a
{
      color: #FFFFFF;
      background: none;
      text-decoration: none;
}
 
#master_content .accordionHeader a:hover
{
      background: none;
      text-decoration: underline;
}
 
.accordionHeaderSelected
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #5078B3;
      font-family: Arial, Sans-Serif;
      font-size: 12px;
      font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}
 
#master_content .accordionHeaderSelected a
{
      color: #FFFFFF;
      background: none;
      text-decoration: none;
}
 
#master_content .accordionHeaderSelected a:hover
{
      background: none;
      text-decoration: underline;
}
 
.accordionContent
{
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}

13. Now go back to default.aspx and open it in source view (nice HTML Tags)…

14. If you have added the style sheet…Go to the head section and after the title section, add the listing 2 in order to include the style sheet to the page.

Listing 2 - Style Sheet Link Reference

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

15. In the Accordion Tag line make them as in listing 3. Notice the use of some additional tags for the accordion. The FadeTransitions is used to create the effect of smooth sliding. Selected Indexed is used to open a pane by default in our case it is the first pane. Transition duration is giving in milliseconds to specify how much to take to perform the total opening. And last, the two style association from the style sheet to give the accordion some color as specified in the style sheet.

Listing 3 - Accordion Specs in Source Mode

<ajaxToolkit:Accordion ID="Accordion1" runat="server" FadeTransitions="True" 
SelectedIndex="0" TransitionDuration="300"  HeaderCssClass="accordionHeader" 
ContentCssClass="accordionContent">

16. Now we have our accordion, we have to add panes to it. However, before adding panes we have to add the panes section inside the accordion.

17. After adding the pane section, you can create as many panes as you like. But please note that every pane should have a header and a content tags.

18. In order how I did construct my panes, take a look at listing 4.

Listing 4 - The complete pane section in HTML

<Panes>
<ajaxToolkit:AccordionPane id="AccordionPane1" runat="server">
<Header> AJAX PANE</Header>
<Content>
AJAX HAS BEEN KNOW TO ENHANCE USER INTERFACE<br />
AJAX HAS BEEN KNOW TO ENHANCE USER INTERFACE<br />
AJAX HAS BEEN KNOW TO ENHANCE USER INTERFACE<br />
AJAX HAS BEEN KNOW TO ENHANCE USER INTERFACE<br />
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane id="AccordionPane2" runat="server">
<Header>MY TEST PANE
</Header>
<Content>
THIS IS JUST A TEST OF PANE CONTENT<br />
THIS IS JUST A TEST OF PANE CONTENT<br />
THIS IS JUST A TEST OF PANE CONTENT<br />
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane id="AccordionPane3" runat="server">
<Header>THIS IS LAST PANE
</Header>
<Content>
HOPE YOU LIKE WHAT YOU SEE<br />
THIS IS JUST A TEST OF PANE CONTENT<br />
HOPE YOU LIKE WHAT YOU SEE<br />
</Content>
</ajaxToolkit:AccordionPane>
</Panes>

19. Please note that coding was necessary here. Also note that the panes can contain any HTML tags you like.

The final output will look like the figures shown below

Figure 1 - The Default Output

Figure 2 - Output when the second pane is clicked

Downloads

Summary

I hope you enjoyed what was presented here. Happy AJAXfying and see you in the next article.



User Comments

Title: Syed   
Name: Emad
Date: 2012-07-19 10:27:09 AM
Comment:
Hi, This is a nice article which helped me in finding the css settings for headers. Can you please tell how to get rid of spacing between headers?
Thanks
Title: fafaf   
Name: fdafdaf
Date: 2012-05-31 5:34:46 AM
Comment:
fsfsafasf
Title: Comment Code   
Name: Tushar
Date: 2012-05-26 7:12:21 AM
Comment:
I want code for create comment in asp.net
Title: 2012 NFL jerseys   
Name: NIKE NFL jerseys
Date: 2012-05-20 11:31:32 PM
Comment:
[/pre]Cheap NFL,NBA,MLB,NHL
[url=http://www.jersey2shop.com/]Jerseys From China[/url]
[url=http://www.jersey2shop.com/]2012 nike nfl Jerseys[/url]
[url=http://www.jersey2shop.com/]cheap China Jerseys[/url]
[url=http://www.jersey2shop.com/]Sports Jerseys China[/url]
[url=http://www.jersey2shop.com/NFL-Jerseys-c68/]NFL Jerseys China[/url]
[url=http://www.jersey2shop.com/NBA-Jerseys-c77/]NBA Jerseys China[/url]
NHL Jerseys China
[url=http://www.jersey2shop.com/MLB-Jerseys-c94/]MLB Jerseys China[/url]NFL jerseys For Sale online.All Our Jerseys Are Sewn On and Directly From Chinese Jerseys Factory
[/pre]
[pre]We Are Professional China jerseys Wholesaler
[url=http://www.cheapjersey2store.com/]Wholesale cheap jerseys[/url]Cheap mlb jerseys
[url= http://www.cheapjersey2store.com/]2012 mlb all atar jerseys[/url]
[url= http://www.cheapjersey2store.com/ [/url]Cheap China Wholesael[/url]
[url= http://www.cheapjersey2store.com/]Wholesale jerseys From China[/url]
[url=http://www.cheapjersey2store.com/]2012 nike nfl Jerseys[/url]Free Shipping,Cheap Price,7 Days Deliver
[/pre]
[/pre]
We are professional jerseys manufacturer from china,wholesal
sports [url= http://www.cheapjersey2store.com/]Jerseys From China[/url]
[url=http://www.cheapjersey2store.com/NFL-Jerseys-c68]NFL jerseys China[/url]
[url=http://www.cheapjersey2store.com/NHL-Jerseys-c96/]NHL Jerseys China[/url]
[url=http://www.cheapjersey2store.com/NBA-Jerseys-c77/]NBA Jerseys China[/url]
[url=http://www.cheapjersey2store.com/MLB-Jerseys-c94/]MLB Jerseys China[/url]
[url= http://www.cheapjersey2store.com/]China Jerseys[/url],Free Shipping
[/pre]
[/pre]
We are professional jerseys manufacturer from china,wholesal
sports [url= http://www.jerseycaptain.com/]cheap jerseys sale online [/url]
[url= http://www.jerseycaptain.com/]2012 nike nfl Jerseys[/url]
[url=http://www.jerseycaptain.com/NFL-Jerseys-c68]cheap NFL jerseys China[/url]
[url=http://www.jerseycaptain.com/NHL-Jerseys-c96/]NHL Jerseys C
Title: Accordion   
Name: abed arafat
Date: 2011-11-01 7:11:16 AM
Comment:
Thank you very much!
Title: Accordion n its pane(s)   
Name: Purna Kandel
Date: 2011-08-24 1:08:34 AM
Comment:
Good
Thank you very much!
;)
Title: accordion asp.net coding reg.   
Name: ssridevi
Date: 2011-07-06 3:12:14 AM
Comment:
fine
need for database and accordion combination
Title: Thank you   
Name: Sri
Date: 2011-03-31 5:28:16 AM
Comment:
It was very helpful..:)
Title: ITs Working   
Name: Rashmi More
Date: 2011-03-11 7:29:59 AM
Comment:
its' working very good and color combination is very good
Title: thanks   
Name: samer
Date: 2011-01-29 6:53:51 PM
Comment:
بسم الله الرحمن الرحيم

thanks alot man it's worked great for me :)
Title: Great Job   
Name: Mishu
Date: 2011-01-19 4:52:57 AM
Comment:
Great Job. It helped a lot.
Title: Ms   
Name: Htar
Date: 2011-01-06 4:48:38 AM
Comment:
Hi Thank you so much
Title: Thanks a Lot, such a useful code   
Name: Archie
Date: 2010-12-24 5:15:25 AM
Comment:
Hi!

Its too Good...worked well for me....well done

Thanks,
Archie
Title: Awesome   
Name: Anand
Date: 2010-10-09 1:19:26 AM
Comment:
hi Nidal Arabi,
Really thank you for encouraging novice ajax learners by giving such nice description on accordion,.... i really wandering from many days for accordion,...finally i got gud notes at u,.....
Thanks alot,
Anand
Title: Accordion User Control   
Name: Vaibhav
Date: 2010-09-20 2:24:03 AM
Comment:
Hi,
I am in a need to using accordion as a User Control.
But I am unsuccessful in that. Can you please suggest me a way to use Ajax Accordion as a user control.
Title: How to collapse pane   
Name: Venkat
Date: 2010-07-01 2:06:09 AM
Comment:
Hi,

How do i collapse pane with out clicking on the another pane.

Thanks and Regards,

Venkat
Title: Well done   
Name: Garry B
Date: 2010-06-09 11:21:34 PM
Comment:
This is what I needed. Thanks
Title: Appreciation   
Name: Avinash Kumar
Date: 2010-05-19 7:42:37 AM
Comment:
This article is very good in understanding.Throughout this article all the basics steps are described very effectively.Thanks...
Title: need a help   
Name: did
Date: 2010-03-22 6:16:39 AM
Comment:
i want to use asp standrd controls into accordion pane.
i am unable to put it. controls are not visible at design time so i cant format it.
please help me.
Title: Creating Your Accordion Solution   
Name: suhair
Date: 2010-02-13 1:39:29 AM
Comment:
good
Title: feed back to accordian   
Name: A.L.RAMARAO
Date: 2010-02-02 8:40:48 AM
Comment:
Thank you very much for the article.Its was very difficult to use AJAX control with ASP.net page but finnaly i made my first page with the halp of your article.

but
How do I programmatically add panes into an Accordion?
Title: Software Engineer   
Name: V
Date: 2010-01-25 10:37:00 AM
Comment:
Good, but i want to add controls like button,Link button dynamically in contentconatainer ,its possible?
Title: Software Engineer   
Name: H
Date: 2009-12-24 1:25:09 AM
Comment:
Good Help for learners...
Title: Thanks   
Name: Shubhanar
Date: 2009-12-01 5:21:53 AM
Comment:
Thank you very much for the article.Its was very difficult to use AJAX control with ASP.net page but finnaly i made my first page with the halp of your article.
Title: Good Stuff   
Name: Raja Subramanian
Date: 2009-09-04 1:55:55 AM
Comment:
Hi..

A Good Stuff provided by you..
Title: CSS Styling not showing up   
Name: Jason
Date: 2009-08-06 4:13:08 AM
Comment:
Good tutorial, problem I'm having is with the CSS Styling. I'm using a .ascx control and I've linked the CSS into that but it doesn't style the Accordion. At one point it was styling it on load then as soon as i clicked a Link Button the styling would disapear, now the styling doesn't appear at all.

Any help would be greatly appreciated.

Jason
Title: feed back to accordian   
Name: viajy singh rawat
Date: 2009-07-14 3:27:03 AM
Comment:
good explaination, but required live demo of this code
Title: Solution Guetat   
Name: Guetat
Date: 2009-04-23 11:38:27 AM
Comment:
to resolve the pb:
MyAccordion.Panes[0].ContentContainer.Controls.Add(The_Control_Web_to_add);
Title: Add a control to the panels dynamic   
Name: Guetat
Date: 2009-04-23 11:21:29 AM
Comment:
How can i add a control web ( for example Label) in the code ( the */.aspx.cs)?
I do : MyAccordion.Panes[0].Controls.Add(The_Control_Web_to_add);
But, isn't work? please help me.
Title: t   
Name: s
Date: 2009-04-11 10:14:10 PM
Comment:
good stuff
Title: help me please.   
Name: jakawarnfun
Date: 2009-03-03 11:31:15 PM
Comment:
how to send value in Accordion to other page.
Title: Good   
Name: karunyaUsine
Date: 2009-02-19 2:09:06 AM
Comment:
its good
Title: How to use accordion as User Control?   
Name: Jason
Date: 2008-12-30 1:40:05 AM
Comment:
How to use accordion as User Control?
Title: how to add the css class the ajax control   
Name: maniyadav
Date: 2008-12-10 2:30:27 AM
Comment:
how to add the css class to the ajax control
Title: How do i?   
Name: Aravind
Date: 2008-11-24 1:38:27 PM
Comment:
how do i programatically use in Accordin?
Title: How do I?   
Name: Mohammed Salah
Date: 2008-11-17 6:55:00 AM
Comment:
how can I add panels from database
Title: How do I?   
Name: Eu
Date: 2008-08-27 5:11:26 PM
Comment:
How do I programmatically add panes into an Accordion?






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-10-23 7:18:35 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search