Great Ideas. Always Flowing.

We are not happy until you are happy. Client satisfaction guaranteed. Whatever your needs and requirements, we have the skills and resources for the job!

Popular Tags...

Tags

SnowCovered Top Sellers

Frustrated over the lack of customization for your user's registration fields? Dynamically setup your DNN Portal with custom registration fields, layout, questions, and other core integration options......

Ultra Video Gallery is a brother product of Ultra Media Gallery, UVG allows you to upload videos in various format and automatically encode them to flv or H264 format, you also can add videos from internet or record live videos from your webcam.

Build high performance, completely customizable data-entry forms and views driven by your DNN and external databases. New built-in tools make it a snap to quickly create data entry forms, data views, and even database tables. Plus, add your own HTML, CSS, Javascript, SQL commands, stored procedures,

The most advanced DotNetNuke shopping cart on the planet. Easy to use e-Commerce, Secure Shopping Cart Software and SEO friendly. B2C / B2B Ecommerce Sites.

One stop solution for events calendar and events registration! FREE DOWNLOAD is available now!

AJAX Accordion Control Tutorial

Accordion Ajax Control

 

The Accordion Control is a part of the Microsoft Ajax Toolkit. The Accordion Control organizes your content into expandable Panes or Tabs which can be clicked to make the content of that Pane visible while hiding all the others. You can have virtually any HTML content inside the pane.

 

When used properly, the Accordion control can be a very effective UI element that can not only help you save costly screen real-estate, but will also make your site look more interactive and organized.

 

In this article we will learn how to use the Accordion Control in our websites, the different properties that can be modified to change the control appearance and the functionality that you can add.

 

Using the Accordion Control in Your Website

 

The Accordion control is one of the few independent or stand-alone controls in the Microsoft Ajax Toolkit. By standalone we mean that it does not extend the behavior of any existing ASP.Net control, and is instead implemented independently.

 

To add the Accordion control to your website begin by installing the Microsoft Ajax Toolkit on your computer, and reference the Microsoft Ajax Toolkit DLL in your project so that the Ajax controls appear in the Controls toolbox.

 

If you’re using Visual Studio 2008 then you must add a page of the type ‘Ajax Web Page’ in your project. This will automatically put in a reference to the Ajax ScriptManager control in the page, otherwise you can manually add the ScriptManager to the page. Like all Ajax Control in the toolkit, the Accordion control depends on the ScriptManager to run.

 

 

Drop the control on to your webpage by double clicking on the icon in the toolbox, or by dragging and dropping it into the toolbox. I recommend that you drop the control on the page in Source view. It will help you place it accurately

 

Try shifting to the Design view now. Notice that nothing is visible on the design view yet. That is because the Accordion Control is a Container control. The control will display only content that’s placed in an Accordion Pane inside it.

 

Let’s see the full code for an Accordion control with two panes in it, and analyze the code bits.

 

<cc1:Accordion ID="Accordion2" runat="server" SelectedIndex="0">

    <Panes>

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

            <Header>

                Heading

            </Header>

            <Content>

                Content

            </Content>

        </cc1:AccordionPane>

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

            <Header>

                Heading

            </Header>

            <Content>

                Content

            </Content>

        </cc1:AccordionPane>

    </Panes>

</cc1:Accordion>

 

This is the bare minimum code required to display an Accordion control on a page. Quite a bit isn’t it? And the display you’ll get out of it isn’t anything useful.

 

To make it look pretty we have to work a little more. But before that, let’s understand how the Accordion control works.

 

Components of Ajax Accordion Control

 

Panes – The Accordion Panes must be placed inside the Panes tag. If you do not place the Accordion Panes in the Panes tag, they will not be recognized.

 

Accordion Pane – This is the control which will hold the content of the panes. You can have multiple Accordion Panes inside the Accordion control.

 

The Accordion Pane control is divided into two parts, the Content and the Header. The Header is the part that will be displayed for all the Panes, while the Content will be displayed only for the active Pane. If you click on the header of some other pane, the active content will be hidden, and the content of that pane will animate into view.

 

SelectedIndex – This is a property of the Accordion control. It is used to mark which Accordion Pane will be have its Content visible when the page is first loaded. It’s a 0 based collection.

 

Remember that each Accordion Pane in the Accordion control will have its own ID. This is to allow you to control the Accordion Pane in code.

 

Enhancing the Look of the Control

 

In its present state the control is useless even though it animates the panes because it looks very unimpressive. Fortunately the Accordion control supports CSS styling, and you can specify how you want the Accordion control to look with a few settings. Here are the properties that you can use to set the CSS classes for the Accordion.

 

ContentCssClass – Styling for the material which is inside the Content portion of the Accordion Panes.

HeaderCssClass – Styling information for the header part of the Accordion Panes.

HeaderSelectedCssClass – You can specify different CSS settings in this property if you want the selected CSS header to look different.

 

We have created two Sample CSS classes for our Accordion.

 

    <style>

        .AccodionHeader

        {

            background-color: Blue;

            color: Yellow;

            border: solid 1px green;

        }

        .AccordionContent

        {

            background-color: Yellow;

            color: brown;

            font-size: 12px;

            font-family: Verdana, Arial, Helvetica;

        }

    </style>

 

This is how the accordion pane looks when the settings are applied.

 

 

Notice the difference between the version with stylesheets? We have set up only the background and foreground colors, and it’s looking much more organized than the original version. Though we’ve selected rather garish colors, you can pick any color scheme you want and make this look really attractive.

 

You can highlight the header of the selected Pane by setting the CSS property for HeaderSelectedCssClass.

 

If you’re not in mood to write CSS, you can also exercise limited control over the appearance using AccordionPane properties like BackColor, Font-Name, Font-Size, etc., but I really do recommend using CSS for this because it will give you much better control over things.

 

Some More Properties of the Accordion

 

Here are some more properties of the Accordion Pane that you can set to modify the behavior of the Accordion control.

 

FadeTransitions – If you set this property to true, the Panes will change with a fade effect when the header is clicked. I.e. the pane going out of view will fade out as it animates. Pretty neat.

 

FramesPerSecond – This decides how smooth the animation is. Usually this should be set to around 35-45. Keep it too low and the animation will be jerky. Keep it too high and the computer may not be able to render it well if it’s a slow computer.

 

TransitionDuration – The length of the animation in milliseconds. A length of 1000 means 1 second.

 

RequireOpenedPane – If this property is set to true, at least one of the panes will be required to be open.

 

Binding Accordion to a DataSource

 

The Ajax Accordion is a Data aware control. This means that you can bind it to a data source. The data source can be a collection, or a DataSet that’s drawn from a database. To do data binding, you must set the HeaderTemplate, and the ContentTemplate to setup the data. In this case you will not have any Accordion Panes in the control as they will be generated on the runtime.

 

You can use any Data Aware control inside the Accordion including labels, text boxes, or even datagrids.

 

Accordion in Code-Behind

 

Like all standard ASP.Net controls, Accordions can be controlled from the code-behind too. Though it’s primarily a container control, so you wouldn’t have many situations in which you would want to do this.

 

You can place any standard ASP.Net control inside the Accordion and use it in Code-Behind. You can also attach events to the controls and process them.

 

Let’s learn how we can make some real good Ajax magic happen inside the Accordion.

 

Let’s drop an ASP.Net textbox inside our Accordion control, and let’s drop a button to change the textbox content. Here’s how our Ajax control looks now.

 

Now if we were to change the text of the Textbox in the Clicked event of the button, we would write the code like this:

 

    protected void Page_Load(object sender, EventArgs e)

    {

        TextBox1.Text = "Gubba";

    }

 

Try clicking the button after writing this code. Notice the refresh? Yep. If you write code for ASP.Net controls the controls will post-back when the event occurs and you will still have to endure that pesky refresh.

 

Luckily there is a workaround, another control from the Ajax Toolkit. Just put your Accordion control inside an UpdatePanel and everything will work without a Postback. Here’s how to write this code.

 

 

 

Let’s go back to our code-behind module and get even more radical. Have a look at the following code.

 

 

Yes, if the Accordion is inside an Updatepanel you can even change the visible Pane of the Accordion control itself. This is very useful if you want to have a button that changes the Accordion Pane from outside. Unfortunately it will not animate the way it animates when the header is clicked.

 

Conclusion

This concludes our tutorial of the Microsoft Ajax Accordion Control.

 

One important thing to remember is that the Accordion control pre-loads all of the data that’s in the panes when the page first shows up. So if you have a lot of data, all of it will be loaded before the page renders. If you put too much material in the Accordion, the page will take longer to load.

 

Don’t use the Accordion as an alternative for complete Pages, instead use it as an attractive UI element that spices up the look of your page, and makes it more interesting. I am sure you have seen Accordion like behavior on many websites, and can figure out where to make them look best.

 

Share the page?

AJAX Accordion Control - share this page - email email - del.icio.us del.icio.us - digg digg - reddit reddit

Feedback Comments

Feedback

SharePoint Web Parts


All Data Springs Web Parts Support WSS 3.0, SharePoint 2007, and SharePoint 2010 Frameworks

Please select license option for each web part you wish to purchase. We highly recommend the SharePoint Bundle to get all Data Springs Web Parts for maximum value!

 

 

      
Cart


Data Springs Sharepoint Bundle

Best Value! The Bundle gives you all 5 web parts in one package at a very attractive price! Best Value! We think you will be very happy with the SharePoint bundle and great price discounts you will receive. With your purchase all of the web parts below will be included.
 
 
 
 

Random Image Web Part

With Random Image for Sharepoint 2007, you can select multiple images to display randomly when the web part loads...
 
 
 
 

Stock Quote Web Part

Giving your site visitors relevant information is critical. With the Data Springs Stock Web Part you can provide your users with up to date financial information
 
 
 
 

Dynamic Image Rotator Web Part

Who would have thought? Adobe Flash® with Sharepoint! The FIRST and ONLY image rotation web part for Sharepoint using Flash Technology from Adobe! The Dynamic Image Rotator displays selected images and then rotates between the images. Several extended and optional features allow you to select the time to rotate each image, fade between
 
 
 
 

SharePoint Charts Web Part

The MOSS Chart Web Part is a web part built by Data Springs for the purpose of rendering several chart types based on data from a SharePoint list on a MOSS 2007 or WSS 3.0 Site
 
 
 
 

Dynamic News Ticker Web Part

Provide current news items with a user-friendly news ticker for your Sharepoint Portal. With millions of web sites offering information you need a fun way to display information and the solution is Flash News Ticker....
 
 
 
 

Tailored Text Web Part

 Tailored Text Web Part allows you to add text/html to your web site that can be different for anonymous users, registered users,  and even individual users specifically.

 
 
 
 

Dynamic Views Web Part

Dynamic Views is an excellent tool to:
Personalization allows you to go the extra mile in communicating or connecting one to one with your clients. When it comes to technology and web site content, you now have the power to leverage this personalization directly with your users on your DotNetNuke® site

 
 
 
 

Dynamic Login Web Part

Your site content isn't vanilla, so why is your portal's login?

Add pizazz and functionality with Dynamic Login! Use custom templates, localization, redirection rules for various roles and many more features!
 
 
 
 


 
 

Join our mailing list...

Get current news and events the easy way
 
 
   
Subscribe Me

Recent Blogs...

 
Copyright 2005 - 2011 by Data Springs, Inc.