This tutorial will cover the AJAX Accordion Control and how to set it up and use it. This tutorial will also cover styling the Accordion control with CSS so that it looks presentable.

Step 1. Create an AJAX ready Web Application

1. Start by creating a Web Form Called “Default.aspx”
2. Then we need to add an AJAX Script Manager to the form which will allow it to be AJAX Ready
3. Once that is complete we can add the Accordion Control and see it work

Step 2. Create the Accordion Control

It is important to note how Accordion Controls are setup. An Accordion Control contains several Accordion Panes, and these Accordion Panes are comprised of Header and Content Sections. When an Accordion Pane is minimized you will only see the header section and when it is enlarged you can see the Header and the Content sections.Copy the code from below and paste it in your web form, then run it to view the basic Accordion Structure.

Step 3. Styling the Accordion Control

The Code below shows a fully styled Accordion Control. It contains some CSS built into the form that changes the way the Accordion looks(colors, fonts, etc.). CSS or Cascading Style Sheets is a simpler way of styling HTML Items and splitting the styles into Classes so that they can be applied to any items you wish.


In this tutorial we showed you how to Use the AJAX Accordion Control in ASP.NET and how to Style it using CSS.

Download Source Files