Ajax Accordion Panel helps to
create or develop a rich web page which also allows to put control inside it.
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.
The Accordion grows/shrinks without restriction. This can cause other elements on your page to move up and down with it.
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.
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.
Creating a Simple Accordion
In this tutorial, you learn how to add an Ajax Control Toolkit
Accordion to a page and show three panes of content. There are four steps: (1)
Add a ToolkitScriptManager (2) Add an Accordion (3) Add AccordionPanes (4) Add
To learn how to install the Ajax Control Toolkit, see the Ajax Control Toolkit page.
Add a ToolkitScriptManager
you can use any of the Ajax Control Toolkit controls in a page, you first need
to add a ToolkitScriptManager to the page. You can drag the
ToolkitScriptManager from the Visual Studio Toolbox window onto the page. The
ToolkitScriptManager is located in theAjax Control Toolkit tab under the Toolbox.
Add an Accordion
in source view, you need to add an Accordion control. You can drag the
Accordion control from the Toolbox or type the tag yourself:
in source view, add one or more AccordionPane controls. The Accordion displays
a single AccordionPane at a time. Notice that each AccordionPane contains both
Add Accordion Styles
Accordion without any Cascading Style Sheet styles applied to it does not look
very nice. The final step is to add one or more styles to the Accordion
Notice that the page contains the definition of four Cascading Style Sheet
classes named accordion, accordionHeader, accordionHeaderSelected, and
accordionContent. These styles are applied to the Accordion control by setting
the CssClass, HeaderCssClass, HeaderSelectedCssClass, and ContentCssClass
Notice that the page contains the definition of four Cascading Style Sheet classes named accordion, accordionHeader, accordionHeaderSelected, and accordionContent. These styles are applied to the Accordion control by setting the CssClass, HeaderCssClass, HeaderSelectedCssClass, and ContentCssClass properties.