Accordion Control In Ajax

The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that contains AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content. We keep track of the selected pane so it stays visible across postbacks.
The Accordion control supports the following AutoSize modes to accommodate a variety of page layouts.
1. None: - The Accordion control grows and shrinks without restriction. This can cause other elements on the page to move up and down in order to accommodate the Accordion control.
2. Limit: - The Accordion control never grows larger than the value specified by its Height property. This causes the content to scroll if the content is too long to be displayed in the allotted space.
3. Fill: - The Accordion control is a fixed size as specified in its Height property. This causes the content to be expanded or shrunk if the content does not fit exactly into the allotted space.


Properties of Accordion Control:-
1.SelectedIndex: - This property is used to set initial AccordionPane to be visible.
2.HeaderCssClass :– This CSS class property is used to apply style to Header of all AccordionPanes.
3.HeaderSelectedCssClass: – This CSS class is used to change the color of selected AccordionPane.
4.ContentCssClass : – This CSS class is used to update the AccordionPane.
5.FadeTransitions : – This Property is used to set True to use the fading transition effect, false for standard transitions.
6.TransitionDuration :– This Property is used to set the Number of milliseconds to animate the transitions

7.FramesPerSecond :- This Property is used to set the Number of frames per second used in the transition animations.
8.RequireOpenedPane: – This Property is used to Prevent closing the currently opened pane when its header is clicked (which ensures one pane is always open). The default value is true.
9.SuppressHeaderPostbacks: – This Property is 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)
10.AutoSize :– This Property is used to set the height of the accordion control. This Property contains 3 types of varieties
1. None- The Accordion grows/shrinks without restriction
2. Auto- the Accordion never grows larger than the value specified by its Height property.
3. Fill- The Accordion always stays the exact same size as its Height property
11.Panes: - Collection of AccordionPane controls
12.HeaderTemplate :- The Header template contains the markup that should be used for an pane's header when databinding
13.ContentTemplate :- The Content template contains the markup that should be used for a pane's content when databinding
14.DataSource: - The data source to use. DataBind() must be called.

15.DataSourceID: - The ID of the data source to use.
16.DataMember: - The member to bind to when using a DataSourceID

Example:-
%@ Page Language="C#" AutoEventWireup="true" CodeFile="Accordian.aspx.cs" Inherits="Accordian" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<style type="text/css">
 .accordion
{
 width: 700px;
}
.accordionHeader
{
border: 1px solid green;
 color: blueviolet;
 background-color: aqua;
font-family: Tahoma;
font-size: 12px;
 font-weight: bold;
 padding: 5px;
margin-top: 5px;
 cursor: pointer;
}
.accordionHeaderSelected
 {
border: 1px solid red;
color: maroon;
background-color: yellow;
font-family: Tahoma;
 font-size: 12px;
 font-weight: bold;
 padding: 5px;
 margin-top: 5px;
cursor: pointer;
}
.accordionContent
 {
background-color: yellowgreen;
 border: 1px dashed blue;
border-top: none;
 padding: 5px;
 padding-top: 10px;
 }
 </style>

<div>
 <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
 </asp:ToolkitScriptManager>
 <asp:Accordion ID="Accordion1" CssClass="accordion" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" runat="server">
<Panes>
 <asp:AccordionPane ID="AccordionPane1" runat="server">
 <Header>Ajax Control Toolkit</Header>
 <Content> The ASP.NET AJAX Control Toolkit is an open-source project built on top of the Microsoft ASP.NET AJAX framework. It is a joint effort between Microsoft and the ASP.NET AJAX community that provides a powerful infrastructure to write reusable, customizable and extensible ASP.NET AJAX extenders and controls, as well as a rich array of controls that can be used out of the box to create an interactive Web experience.
 </Content>
 </asp:AccordionPane>
 <asp:AccordionPane ID="AccordionPane2" runat="server">
 <Header>jQuery</Header>
 <Content> jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
 </Content>
 </asp:AccordionPane>
 <asp:AccordionPane ID="AccordionPane3" runat="server">
 <Header>Juice UI</Header>
 <Content> Juice UI is an open-source collection of WebForms components that brings jQuery UI Widgets to your project with ease. Start leveraging the power of the world's most popular JavaScript UI library while working with familiar code in your ASP.NET projects.
Juice UI allows you to create flexible, interactive web applications quickly. Entice your users with behaviors such as drag & drop, resizing, sorting and selecting. Build first class apps with accordions, autocompletes, datepickers, sliders, and more. Juice UI provides the simplicity needed for prototyping and the robustness needed for enterprise class production applications.
</Content>
 </asp:AccordionPane>
 </Panes>
 </asp:Accordion>
</div>


Output:-