The Accordion control groups multiple collapsible panels in a single control and enables you to collapse and expand the panels among them. The Accordion control allows expanding only one panel at a time . The Accordion control contains a collection of child AccordionPane controls . Each of which defines a header and content template. Each pane can contain the different HTML markup . ASP.NET and AJAX markup.
lets take an Example
Copy this code and paste your web form ( Before copy you must add ajax control tool kit to your project )
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ACoordion.aspx.cs" Inherits="ACoordion" %>
<%@ 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></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:Accordion ID="Accordion1" runat="server" Width="374px" AutoSize ="None" FadeTransitions ="true" TransitionDuration ="300" FramesPerSecond ="25" SelectedIndex ="1">
<Panes >
<asp:AccordionPane ID="AccordionPane1" runat="server">
<Header>
<div style="background-color: #99CC00">Header-1</div>
</Header>
<Content >
hello world
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="AccordionPane2" runat="server">
<Header >
<div style="background-color: #99CC34">header-2</div>
</Header>
<Content>
my name is khan
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="AccordionPane3" runat="server">
<Header >
<div style="background-color: #99CC45">header-3</div>
</Header>
<Content >
raju ban gya gental man
</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
</div>
</form>
</body>
</html>
OutPut:
Properties of Accordion Control:
SelectedIndex : Sets the index of the AccordionPane that should remain visible when the page is loaded for the first time.
HeaderCssClass : Sets the css class to apply to the header of the AccodionPanes.
HeaderSelectedCssClass : Sets the css class to apply to the selected header of the AccordionPane.
ContentCssClass : Sets the css class to apply to the contents of the AccordionPane.
FadeTransitions : Determines Whether or not the fading transition effect should be used.
TransitionDuration : Sets the time to animate the transitions.
FramesPerSecond : Sets the number of frames per second used in the transition animation.
AutoSize : Restricts the growth of the Accordion.
RequireOpenedPane : Determines whether or not the currently opened pane should close when its header is clicked.
SuppressheaderPostbacks : Determine whether or not the client-side click handlers inside a header are fired to cause a postback.
Panes : Specifies a collection of AccordionPane controls.
HeaderTemplate : Contain the markup that is used for pane's header during data binding.
ContentTemplate : Contains the markup that should be used for pane's contains when data binding.
DataSource : Specifies the Data source to be used for data binding.
lets take an Example
Copy this code and paste your web form ( Before copy you must add ajax control tool kit to your project )
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ACoordion.aspx.cs" Inherits="ACoordion" %>
<%@ 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></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:Accordion ID="Accordion1" runat="server" Width="374px" AutoSize ="None" FadeTransitions ="true" TransitionDuration ="300" FramesPerSecond ="25" SelectedIndex ="1">
<Panes >
<asp:AccordionPane ID="AccordionPane1" runat="server">
<Header>
<div style="background-color: #99CC00">Header-1</div>
</Header>
<Content >
hello world
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="AccordionPane2" runat="server">
<Header >
<div style="background-color: #99CC34">header-2</div>
</Header>
<Content>
my name is khan
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="AccordionPane3" runat="server">
<Header >
<div style="background-color: #99CC45">header-3</div>
</Header>
<Content >
raju ban gya gental man
</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
</div>
</form>
</body>
</html>
OutPut:
Properties of Accordion Control:
SelectedIndex : Sets the index of the AccordionPane that should remain visible when the page is loaded for the first time.
HeaderCssClass : Sets the css class to apply to the header of the AccodionPanes.
HeaderSelectedCssClass : Sets the css class to apply to the selected header of the AccordionPane.
ContentCssClass : Sets the css class to apply to the contents of the AccordionPane.
FadeTransitions : Determines Whether or not the fading transition effect should be used.
TransitionDuration : Sets the time to animate the transitions.
FramesPerSecond : Sets the number of frames per second used in the transition animation.
AutoSize : Restricts the growth of the Accordion.
RequireOpenedPane : Determines whether or not the currently opened pane should close when its header is clicked.
SuppressheaderPostbacks : Determine whether or not the client-side click handlers inside a header are fired to cause a postback.
Panes : Specifies a collection of AccordionPane controls.
HeaderTemplate : Contain the markup that is used for pane's header during data binding.
ContentTemplate : Contains the markup that should be used for pane's contains when data binding.
DataSource : Specifies the Data source to be used for data binding.