How to Design Ajax Accordion Control Using CSS

In this article I am going to explain how to design the Ajax Accordion control using CSS.

Prerequisites

1. AjaxControlToolkit 3.5
2. Visual Studio 2008.

If you don't have AjaxControlToolkit 3.5 then you can download it from the link given below:

http://ajaxcontroltoolkit.codeplex.com/releases/view/90063

After downloading it install it via the toolbox in Visual Studio. Create a new tab in the toolbox via right-click and add new tab, rename it to ajax and then right-click on it and choose item and then browse to the location where you have download ajaxcontroltoolkit35.dll and add it and click ok.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Untitled Page</title>

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

</head>

<body>

<form id="form1" runat="server">

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

</asp:ToolkitScriptManager>

<div>

<asp:Accordion ID="Accordion1" AutoSize="None" ContentCssClass="accordionContent"

HeaderCssClass="accordionHeader" FadeTransitions="true" TransitionDuration="250"

FramesPerSecond="40" RequireOpenedPane="false" HeaderSelectedCssClass="accordionHeaderSelected" runat="server">

<Panes>

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

<Header>

<a href="#" onclick="return false;">click to open first accordion</a>

</Header>

<Content>

<p>

This is accordion Pane1.

</p>

</Content>

</asp:AccordionPane>

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

<Header>

<a href="#" onclick="return false;">click to open second accordion</a>

</Header>

<Content>

<p>