Accordion and AccordionPane in asp.net ajax
Accordion is an asp.net ajax toolkit's control. Accordion web control provide multiple panes.
only one pane can display at a time in an Accordion control. Accordion is implemented as a web control.
an AccordionPane web control represent a pane in accordion. AccordionPane control built with a header template and
a content template. asp.net developers can track the selected pane so it stays visible across postback.
Accordion control support three auto size modes those are None, Limit and Fill. we can set Accordion auto
size mode by setting a value for its AutoSize property. AutoSize mode None allow the Accordion
grows or shrink without restriction. with this property Accordion size depends on pane content size. AutoSize mode Limit
set a maximum height for Accordion control. in this mode, if the pane content is higher than Accordion Height property then a scrollbar
appears in Accordion control. Fill mode stays the Accordion exacts same size as its Height property.
Accordion control can be data bound. we just need to specify Accordion control's DataSource or DataSourceID property.
after assigning property value we need to set data items in HeaderTemplate and ContentTemplate property. if we use Accordion
DataSource property then we must need to call the DataBind method.
Accordion control also have many useful properties such as SelectedIndex, HeaderCssClass, HeaderSelectedCssClass, ContentCssClass,
FadeTransitions, TransitionDuration, FramesPerSecond, RequireOpenedPane, SupressHeaderPostbacks, Panes, HeaderTemplate, ContentTemplate etc.
Accordion SelectedIndex property indicate the AccordionPane that is initially visible.
HeaderCssClass, HeaderSelectedCssClass, ContentCssClass properties are used to change the default look and feel of Accordion and AccordionPane
controls.
FadeTransition, TransitionDuration and FramesPerSecond properties allow us to configure Accordion fading transition effect.
RequireOpenedPane property ensure that one pane is always open (visible) in Accordion control. SupressHeaderPostbacks property prevent
client side click handlers for pane header elements such as a hyperlink in header. Panes property provide a collection of AccordionPane
controls in Accordion.
HeaderTemplate contains the markup which is used for a pane's header when databinding and ContentTemplate contains the markup for pane's content
when databinding.
UsingAccordion.aspx
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html>
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>How to use Accordion in asp.net ajax</title>
<style type="text/css">
.HeaderCSS
{
color:Snow;
background-color:Crimson;
font-size:medium;
border:solid 1px salmon;
font-weight:bold;
}
.HeaderSelectedCSS
{
color:Snow;
background-color:OrangeRed;
font-weight:bold;
font-style:italic;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2 style="color:DarkSeaGreen; font-style:italic;">Ajax Control Toolkit Example: Using Accordion</h2>
<hr width="450" align="left" color="DarkSeaGreen" />
<asp:ScriptManager
ID="ScriptManager1"
runat="server"
>
</asp:ScriptManager>
<cc1:Accordion
runat="server"
ID="Accordion1"
HeaderCssClass="HeaderCSS"
HeaderSelectedCssClass="HeaderSelectedCSS"
Width="500"
BorderColor="Orange"
BorderWidth="2"
>
<Panes>
<cc1:AccordionPane runat="server" ID="AccordionPane1">
<Header>Red Orchid</Header>
<Content>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/RedOrchid.jpg" Width="200" />
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane runat="server" ID="AccordionPane2">
<Header>Green Orchid</Header>
<Content>
<asp:Image ID="Image2" runat="server" ImageUrl="~/Images/GreenOrchid.jpg" />
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane runat="server" ID="AccordionPane3">
<Header>Blue Orchid</Header>
<Content>
<asp:Image ID="Image3" runat="server" ImageUrl="~/Images/BlueOrchid.jpg" />
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
</div>
</form>
</body>
</html>
