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>

This is a second AcordinPane2.

</p>

</Content>

</asp:AccordionPane>

</Panes>

</asp:Accordion>

</div>

</form>

</body>

</html>

Your CSS file will look like this:

body

{

background:#006699;

}

.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;

}

.accordionHeader a

{

color: #FFFFFF;

background: none;

text-decoration: none;

}

.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;

}

.accordionHeaderSelected a

{

color: #FFFFFF;

background: none;

text-decoration: none;

}

.accordionHeaderSelected a:hover

{

background: none;

text-decoration: underline;

}

.accordionContent

{

background-color: #D3DEEF;

border: 1px dashed #2F4F4F;

border-top: none;

padding: 5px;

padding-top: 10px;

}

Press F5 to run the website and see the output.

output-ajax-accordion-control.jpg

When you click on any link then it will be like this:

link-ajax-accordion-control.jpg

link.1-ajax-accordion-control.jpg