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 ScriptManager (2) Add an Accordion (3) Add AccordionPanes (4) Add Accordion styles.
To learn how to install the AJAX Control Toolkit, see the
Step-by-Step Installation Guide page.
Add a ScriptManager
Before you can use any of the AJAX Control Toolkit controls in a page, you first need to add a ScriptManager to the page. You can drag the ScriptManager from the Visual Studio Toolbox window onto the page. The ScriptManager is located in the
AJAX Extensions tab under the Toolbox.
<asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager>
Add an Accordion
Next, in source view, you need to add an Accordion control. You can drag the Accordion control from the Toolbox or type the tag yourself:
<asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager><ajaxToolkit:AccordionID="Accordion1"runat="server"></ajaxToolkit:Accordion>
Add AccordionPanes
Next, in source view, add one or more AccordionPane controls. The Accordion displays a single AccordionPane at a time. Notice that each AccordionPane contains both a
header and
content tag.
<asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager><ajaxToolkit:AccordionID="Accordion1"runat="server"><Panes><ajaxToolkit:AccordionPanerunat="server"><Header>Pane 1</Header><Content>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
</Content></ajaxToolkit:AccordionPane><ajaxToolkit:AccordionPaneID="AccordionPane1"runat="server"><Header>Pane 2</Header><Content>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
</Content></ajaxToolkit:AccordionPane><ajaxToolkit:AccordionPaneID="AccordionPane2"runat="server"><Header>Pane 3</Header><Content>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
</Content></ajaxToolkit:AccordionPane></Panes></ajaxToolkit:Accordion>Add Accordion Styles
An 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 control:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AccordionSimple.Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title>Simple Accordion</title><styletype="text/css">
.accordion {
width: 400px;
}
.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><formid="form1"runat="server"><div><asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager><ajaxToolkit:AccordionID="Accordion1"CssClass="accordion"HeaderCssClass="accordionHeader"HeaderSelectedCssClass="accordionHeaderSelected"ContentCssClass="accordionContent"runat="server"><Panes><ajaxToolkit:AccordionPanerunat="server"><Header>Pane 1</Header><Content>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
</Content></ajaxToolkit:AccordionPane><ajaxToolkit:AccordionPaneID="AccordionPane1"runat="server"><Header>Pane 2</Header><Content>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
</Content></ajaxToolkit:AccordionPane><ajaxToolkit:AccordionPaneID="AccordionPane2"runat="server"><Header>Pane 3</Header><Content>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
</Content></ajaxToolkit:AccordionPane></Panes></ajaxToolkit:Accordion></div></form></body></html>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.
The final result looks like this:
Click here to see the final result