Creating a Simple Accordion

Modified on 2010/05/05 23:29 by Stephen Walther — Categorized as: Uncategorized

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 Accordion styles.

To learn how to install the Ajax Control Toolkit, see the Ajax Control Toolkit page.

Add a ToolkitScriptManager

Before 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 the Ajax Control Toolkit tab under the Toolbox.

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

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:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
   
<asp:Accordion 
    ID="Accordion1" 
    runat="server">
</asp: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:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
   
<asp:Accordion 
    ID="Accordion1" 
    runat="server">
<Panes>
    <asp:AccordionPane runat="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>
    </asp:AccordionPane>
    <asp:AccordionPane ID="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>
    </asp:AccordionPane>
    <asp:AccordionPane ID="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>
    </asp:AccordionPane>
</Panes>
</asp: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="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Simple Accordion</title>
    <style type="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>
    <form id="form1" runat="server">
    <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 runat="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>
    </asp:AccordionPane>
    <asp:AccordionPane ID="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>
    </asp:AccordionPane>
    <asp:AccordionPane ID="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>
    </asp:AccordionPane>
</Panes>
</asp: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: