AJAX Accordion Control

Building an Accordion Menu using ASP.Net AJAX Accordion control, Sitemap and Site Map Data Source control. First of all Register the AJAX Control Toolkit Library by adding reference to the project.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

Add below code in aspx page of web application.

<cc1:Accordion ID="AccordionMenu" runat="server" OnItemDataBound="OnItemDataBound"
       Width="300" HeaderCssClass="header" HeaderSelectedCssClass="header_selected"
       ContentCssClass="content">
       <HeaderTemplate>
           <asp:HyperLink ID="lnkMenu" NavigateUrl='<%# Eval("Url") %>' Text='<%# Eval("Title") %>'
               runat="server" />
       </HeaderTemplate>
       <ContentTemplate>
           <table>
               <asp:Repeater ID="rptMenu" runat="server">
                   <ItemTemplate>
                       <tr>
                           <td>
                               <asp:HyperLink ID="HyperLink1" NavigateUrl='<%# Eval("Url") %>' Text='<%# Eval("Title") %>'
                                   runat="server" />
                           </td>
                       </tr>
                   </ItemTemplate>
               </asp:Repeater>
           </table>
       </ContentTemplate>
   </cc1:Accordion>
   <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />

 C# Code

protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           AccordionMenu.DataSource = (SiteMapDataSource1.GetView("") as SiteMapDataSourceView).Select(DataSourceSelectArguments.Empty);
           AccordionMenu.DataBind();
       }
   }

   protected void OnItemDataBound(object sender, AccordionItemEventArgs e)
   {
       if (e.ItemType == AccordionItemType.Header)
       {
           string menuText = (e.AccordionItem.FindControl("lnkMenu") as HyperLink).Text;
           if (menuText == SiteMap.CurrentNode.Title || menuText == SiteMap.CurrentNode.ParentNode.Title)
           {
               AccordionMenu.SelectedIndex = e.ItemIndex;
           }
       }
       if (e.ItemType == AccordionItemType.Content)
       {
           AccordionContentPanel cPanel = e.AccordionItem;
           Repeater rptMenu = (Repeater)cPanel.FindControl("rptMenu");
           rptMenu.DataSource = (e.AccordionItem.DataItem as SiteMapNode).ChildNodes;
           rptMenu.DataBind();
       }
   }

Add sitemap in the project and add below code with reference to the pages inside the project. And we get following output as a result.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
 <siteMapNode url="" title="Home" description="">
    <siteMapNode url="Home.aspx" title="Home" description="Home Page" />
    <siteMapNode url="javascript:;" title="Services" description="Services Page">
      <siteMapNode url ="Consulting.aspx" title="Consulting" description="Consulting Page"></siteMapNode>
      <siteMapNode url ="Outsourcing.aspx" title="Outsourcing" description="Outsourcing Page"></siteMapNode>
    </siteMapNode>
    <siteMapNode url="About.aspx" title="About" description="About Us Page" />
    <siteMapNode url="Contact.aspx" title="Contact" description="Contact Us Page" />
 </siteMapNode>
</siteMap>

 Output

Demo Code

Download Demo