In this article
I’m going to explain how to use Ajax Accordian control in asp.net.
The
Accordian is a web control that allows you to provide multiple panes and
display them at a time and only one panes expanded at a time. Accordian control
has a templates for header and content. Also
we can add server controls to the Accordian.
Accordian
properties:
SelectedIndex - The AccordionPane to be
initially visible
HeaderCssClass - Name of the CSS class to use
for the headers. This can be either applied to the Accordion as a default for
all AccordionPanes, or an individual AccordionPane.
HeaderSelectedCssClass - Name
of the CSS class to use for the selected header. This can be either applied to
the Accordion as a default for all AccordionPanes, or an individual
AccordionPane.
ContentCssClass - Name of the CSS class to use
for the content. This can be either applied to the Accordion as a default for
all AccordionPanes, or an individual AccordionPane.
FadeTransitions - True to use the fading
transition effect, false for standard transitions.
TransitionDuration - Number of milliseconds to
animate the transitions
FramesPerSecond - Number of frames per second
used in the transition animations
AutoSize - Restrict the growth of the
Accordion. The values of the AutoSize enumeration are described above.
RequireOpenedPane - Prevent closing the
currently opened pane when its header is clicked (which ensures one pane is
always open). The default value is true.
SuppressHeaderPostbacks -
Prevent the client-side click handlers of elements inside a header from firing
(this is especially useful when you want to include hyperlinks in your headers
for accessibility)
Panes - Collection of AccordionPane
controls
HeaderTemplate - The Header template contains
the markup that should be used for an pane's header when databinding
ContentTemplate - The Content template
contains the markup that should be used for a pane's content when databinding
DataSource - The data source to use.
DataBind() must be called.
DataSourceID - The ID of the data source to
use.
DataMember - The member to bind to when
using a DataSourceID
Designer
Source Code:
<%@ 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></title>
<style type="text/css">
.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:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div style="width:300px">
<asp:accordion id="MyAccordion" runat="server" selectedindex="0" headercssclass="accordionHeader"
headerselectedcssclass="accordionHeaderSelected" contentcssclass="accordionContent"
fadetransitions="false" framespersecond="40" transitionduration="250" autosize="None"
requireopenedpane="false" suppressheaderpostbacks="true">
<Panes>
<asp:AccordionPane ID="AccordionPane1" runat="server">
<Header>Heading-1</Header>
<Content>
Content-1<br />
Content-1<br />
Content-1<br />
Content-1<br />
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="AccordionPane2" runat="server">
<Header>Heading-2</Header>
<Content>
Content-2<br />
Content-2<br />
Content-2<br />
Content-2<br />
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="AccordionPane3" runat="server">
<Header>Heading-3</Header>
<Content>
Content-3<br />
Content-3<br />
Content-3<br />
Content-3<br />
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="AccordionPane4" runat="server">
<Header>Heading-3</Header>
<Content>
Content-4<br />
Content-4<br />
Content-4<br />
Content-4<br />
</Content>
</asp:AccordionPane>
</Panes>
</asp:accordion>
</div>
</div>
</form>
</body>
</html>