Ajax contorl toolkit Accordion Demonstration
Accordion Demonstration
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.
It also supports three AutoSize modes so it can fit in a variety of layouts.
- None - The Accordion grows/shrinks without restriction. This can cause other elements
on your page to move up and down with it.
- Limit - The Accordion never grows larger than the value specified by its Height
property. This will cause the content to scroll if it is too large to be displayed.
- Fill - The Accordion always stays the exact same size as its Height property. This
will cause the content to be expanded or shrunk if it isn't the right size.
The Accordion is written using an extender like most of the other extenders in the AJAX Control Toolkit.
The extender expects its input in a very specific hierarchy of container elements (like divs), so
the Accordion and AccordionPane web controls are used to generate the expected input for the extender.
The extender can also be used on its own if you provide it appropriate input.

ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. However, AJAX isn't just for ASP.NET. You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers.
Fade Transitions:
AutoSize:
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.
It also supports three AutoSize modes so it can fit in a variety of layouts.
- None - The Accordion grows/shrinks without restriction. This can cause other elements on your
page to move up and down with it.
- Limit - The Accordion never grows larger than the value specified by its Height property. This
will cause the content to scroll if it is too large to be displayed.
- Fill - The Accordion always stays the exact same size as its Height property. This will cause
the content to be expanded or shrunk if it isn't the right size.
The Accordion is written using an extender like most of the other extenders in the AJAX Control Toolkit. The
extender expects its input in a very specific hierarchy of container elements (like divs), so the Accordion
and AccordionPane web controls are used to generate the expected input for the extender. The extender can also be
used on its own if you provide it appropriate input.
The Accordion can also be databound. Simply specify a data source through the DataSource or
DataSourceID properties and then set your data items in the HeaderTemplate and ContentTemplate properties.
The control above is initialized with this code. The italic properties are optional:
<ajaxToolkit:Accordion
ID="MyAccordion"
runat="Server"
SelectedIndex="0"
HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent"
AutoSize="None"
FadeTransitions="true"
TransitionDuration="250"
FramesPerSecond="40"
RequireOpenedPane="false"
SuppressHeaderPostbacks="true">
<Panes>
<ajaxToolkit:AccordionPane
HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent">
<Header> . . . </Header>
<Content> . . . </Content>
</ajaxToolkit:AccordionPane>
.
.
.
</Panes>
<HeaderTemplate>...</HeaderTemplate>
<ContentTemplate>...</ContentTemplate>
</ajaxToolkit:Accordion>
- 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
The AutoSize "Limit" mode works exactly the same as the "Fill" mode for Internet Explorer 6 and 7 because
they do not support the max-height CSS property.
If you place the Accordion inside a <table> tag and have FadeTransitions set to true in
Internet Explorer 6, it will affect the spacing between Accordion Panes.
Also, when viewing the demo in Internet Explorer 6, maximizing the browser at higher resolutions
like 1600 x 1200 will cause the transitions to animate slower than at lower resolutions like 1280 x 1024.
Ajax control toolkit Accordion example with demo in asp .net
In this asp .net tuotiral you will learn about
ajax control toolkit accordion,ajax control toolkit accordion not working,ajax control toolkit accordion menu,ajax control toolkit accordion kullanımı,ajax control toolkit accordion vertical,ajax control toolkit accordion tutorial,ajax control toolkit accordion example,ajax control toolkit accordion javascript,ajax control toolkit accordion selectedindexchanged,ajax control toolkit accordion itemcommand,ajax control toolkit accordion horizontal,ajax control toolkit accordion demo,ajax control toolkit accordion gridview,ajax control toolkit accordion repeater,ajax control toolkit accordion autosize,ajax control toolkit accordion css,ajax control toolkit accordion pane,using ajax control toolkit accordion,ajax control toolkit accordion selectedindex,accordion in ajax control toolkit,ajax control toolkit accordion expand all,ajax control toolkit accordion sample code,ajax control toolkit accordion events,ajax control toolkit accordion databind,ajax control toolkit accordion postback,how to use ajax control toolkit accordion,ajax control toolkit nested accordion,ajax control toolkit accordion style,ajax control toolkit accordion programmatically