ASP.NET Ajax Accordion
The Ajax Control Toolkit contains controls that you can use to build highly responsive and interactive Ajax-enabled Web applications. The Accordion Control manages your content into expandable Panes which can be clicked to make the content of that Pane visible and hiding all the other Panes.
An Accordion Control contains several Accordion Panes and displays a single AccordionPane at a time. Each AccordionPane contains both a header and content tag. We can fill each header and content tag through programmatically to Accordion Control.
VB.Net
Dim pane1 As New AjaxControlToolkit.AccordionPane()
pane1.ID = "pane1"
pane1.HeaderContainer.Controls.Add(New LiteralControl("Pane 1"))
pane1.ContentContainer.Controls.Add(New LiteralControl("This is Accordion Pane No 1"))
Accordion1.Panes.Add(pane1)
C#
AjaxControlToolkit.AccordionPane pane1 = new AjaxControlToolkit.AccordionPane();
pane1.ID = "pane1";
pane1.HeaderContainer.Controls.Add(new LiteralControl("Pane 1"));
pane1.ContentContainer.Controls.Add(new LiteralControl("This is Accordion Pane No 1"));
Accordion1.Panes.Add(pane1);
The following Asp.Net Ajax program shows how to set up an Accordion control with 4 panes in a web application. To use the Ajax Control Toolkit in your Visual Studio project, you should add reference to the AjaxControlToolkit.dll in your project.
Default.aspx
<%@ 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>
<style type="text/css">
.accordion {
width: 200px;
}
.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;
}
.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;
}
.accordionContent {
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Accordion
ID="Accordion1"
CssClass="accordion"
HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent"
runat="server">
</asp:Accordion>
</div>
</form>
</body>
</html>
Full Source | C#
using System;
using System.Web.UI;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxControlToolkit.AccordionPane pane1 = new AjaxControlToolkit.AccordionPane();
pane1.ID = "pane1";
pane1.HeaderContainer.Controls.Add(new LiteralControl("Pane 1"));
pane1.ContentContainer.Controls.Add(new LiteralControl("This is Accordion Pane No 1"));
Accordion1.Panes.Add(pane1);
AjaxControlToolkit.AccordionPane pane2 = new AjaxControlToolkit.AccordionPane();
pane2.ID = "pane2";
pane2.HeaderContainer.Controls.Add(new LiteralControl("Pane 2"));
pane2.ContentContainer.Controls.Add(new LiteralControl("This is Accordion Pane No 2"));
Accordion1.Panes.Add(pane2);
AjaxControlToolkit.AccordionPane pane3 = new AjaxControlToolkit.AccordionPane();
pane3.ID = "pane3";
pane3.HeaderContainer.Controls.Add(new LiteralControl("Pane 3"));
pane3.ContentContainer.Controls.Add(new LiteralControl("This is Accordion Pane No 3"));
Accordion1.Panes.Add(pane3);
AjaxControlToolkit.AccordionPane pane4 = new AjaxControlToolkit.AccordionPane();
pane4.ID = "pane4";
pane4.HeaderContainer.Controls.Add(new LiteralControl("Pane 4"));
pane4.ContentContainer.Controls.Add(new LiteralControl("This is Accordion Pane No 4"));
Accordion1.Panes.Add(pane4);
}
}
Full Source | VB.NET
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim pane1 As New AjaxControlToolkit.AccordionPane()
pane1.ID = "pane1"
pane1.HeaderContainer.Controls.Add(New LiteralControl("Pane 1"))
pane1.ContentContainer.Controls.Add(New LiteralControl("This is Accordion Pane No 1"))
Accordion1.Panes.Add(pane1)
Dim pane2 As New AjaxControlToolkit.AccordionPane()
pane2.ID = "pane2"
pane2.HeaderContainer.Controls.Add(New LiteralControl("Pane 2"))
pane2.ContentContainer.Controls.Add(New LiteralControl("This is Accordion Pane No 2"))
Accordion1.Panes.Add(pane2)
Dim pane3 As New AjaxControlToolkit.AccordionPane()
pane3.ID = "pane3"
pane3.HeaderContainer.Controls.Add(New LiteralControl("Pane 3"))
pane3.ContentContainer.Controls.Add(New LiteralControl("This is Accordion Pane No 3"))
Accordion1.Panes.Add(pane3)
Dim pane4 As New AjaxControlToolkit.AccordionPane()
pane4.ID = "pane4"
pane4.HeaderContainer.Controls.Add(New LiteralControl("Pane 4"))
pane4.ContentContainer.Controls.Add(New LiteralControl("This is Accordion Pane No 4"))
Accordion1.Panes.Add(pane4)
End Sub
End Class
Click the following links to see full source code
C# Source Code
VB.NET Source Code
Related Topics
- What is Ajax
- How to ASP.NET Ajax
- ASP.NET Ajax ServerControls
- First Asp.Net Ajax Program
- ASP.NET Ajax UpdateProgress
- ASP.NET Ajax Timer
- ASP.NET Ajax Database Programming
- ASP.NET Ajax Toolkit
- Ajax Accordion from database
- Ajax Accordion from XML
- Ajax AsyncFileUpload Control
- Ajax ConfirmButtonExtender
- Ajax CalendarExtender
- CalendarExtender Validation