Ajax Accordion example to create Vertical DropDown menu in asp.net

Introduction: In this article I am going to explain with example how to use Ajax Accordion control to create Vertical Drop Down menu with sub menu option in asp.net.

Description: The Accordion control provided by the Ajax is a web control that allows us to provide multiple panes in the small area of the page and display them one at a time. When one pane is opened other will be closed. So it is like having multiple Collapsible Panels where only one can be expanded at a time. Other panes can be opened by clicking on the desired pane as shown in the Image.

In previous articles i explained the examples of Ajax AutoCompleteExtender control example in asp.net using C#,VB.Net without using web service and Drag & drop to upload multiple files using AjaxFileUpload like Facebook in asp.net and Create drop down menu for login and signup using jQuery and CSS in asp.net and Fill dropdownlist with days, month and year and jQuery stylish dropdown menu example like Facebook,Linkedin and Ajax CascadingDropDown example in asp.net to Fill DropDownList with Countries,states and cities 

Below are some of the properties of the Accordion  control that can be set as per requirement.

• SelectedIndex – This property sets AccordionPane to be initially visible e.g. if set  to 0 then very first AccordionPane will be opened(it is default)
• HeaderCssClass – It is the 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 for an individual AccordionPane.
• HeaderSelectedCssClass – It is the 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 for an individual AccordionPane.
• ContentCssClass – It is the 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 for an individual AccordionPane.
• FadeTransitions – Set this property to True to use the fading transition effect and set to false for standard transitions.
• TransitionDuration – It is Number of milliseconds to animate the transitions e.g. 350 in our example.
• FramesPerSecond – It is Number of frames per second used in the transition animations e.g. 60 in our example.
• RequireOpenedPane – This property is used to prevent closing the currently opened pane when its header is clicked (which ensures one pane is always open). The default value is true.
• SuppressHeaderPostbacks – This property 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 – It is a 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 – If data source is used then DataBind() must be called.
• DataSourceID - The ID of the data source to use.
• DataMember - The member to bind to when using a DataSourceID
• AutoSize – This Property is used to set the height of the accordion control. This Property has  3 types

1. None- Using this Accordion can grows/shrinks without restriction
2. Auto- Using this 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 in the specified height. 
3. Fill- The Accordion always stays in 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.

Implementation: Let’s understand by practical example.

•   Place a ScriptManager control from the AJAX Extensions category of the Visual Studio's toolbox.
  

<asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>   

• Place a Accordion control from the Ajax Control Toolkit and design as mentioned below. If you have not installed the AjaxControlToolkit then read the article How to install AjaxControlToolkit in Visual Studio.

<asp:Accordion ID="Accordion1" runat="server" SelectedIndex="0" AutoSize="Limit"

            BackColor="#EF8421" FadeTransitions="true" TransitionDuration="350" FramesPerSecond="60" RequireOpenedPane="true" Width="200px" Font-Names="Verdana" Font-Size="Smaller">

        <Panes>

        <asp:AccordionPane ID="AccordionPane1" runat="server">

                    <Header>

                        <div style="background:#EF8421; font-size: medium; cursor: hand; border: 1px Solid #FFFFFF; color:#FFFFFF; padding-left:10px;">

                            Menu 1

                        </div>

                    </Header>

                    <Content>

                        <div style="background:#FFFFFF;border: 1px Solid #FFFFFF; color:#FFFFFF;">

                            <ul style="list-style-type: none;">

                                <li><a href="#">Sub Menu 1</a></li>

                                    <li><a href="#">Sub Menu 2</a></li>

                                        <li><a href="#">Sub Menu 3</a></li>

                                            <li><a href="#">Sub Menu 4</a></li>                                              

                            </ul>

                        </div>

                    </Content>

                </asp:AccordionPane>

                <asp:AccordionPane ID="AccordionPane2" runat="server">

                    <Header>

                        <div style="background:#EF8421; font-size: medium; cursor: hand; border: 1px Solid #FFFFFF; color:#FFFFFF; padding-left:10px;">

                           Menu 2

                        </div>

                    </Header>

                    <Content>

                        <div style="background:#FFFFFF;border: 1px Solid #FFFFFF; color:#FFFFFF">

                            <ul style="list-style-type: none;">

                                <li><a href="#">Sub Menu 1</a></li>

                                    <li><a href="#">Sub Menu 2</a></li>

                                        <li><a href="#">Sub Menu 3</a></li>                                           

                            </ul>

                        </div>

                    </Content>

                </asp:AccordionPane>

                <asp:AccordionPane ID="AccordionPane3" runat="server">

                    <Header>

                        <div style="background:#EF8421; font-size: medium; cursor: hand; border: 1px Solid #FFFFFF; color:#FFFFFF; padding-left:10px;">

                           Menu 3

                        </div>

                    </Header>

                    <Content>

                        <div style="background:#FFFFFF;border: 1px Solid #FFFFFF; color:#FFFFFF">

                            <ul style="list-style-type: none;">

                                <li><a href="#">Sub Menu 1</a></li>

                                    <li><a href="#">Sub Menu 2</a></li>

                                        <li><a href="#">Sub Menu 3</a></li>                                          

                            </ul>

                        </div>

                    </Content>

                </asp:AccordionPane>               

        </Panes>

        </asp:Accordion> 

• Have you noticed the line <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> added automatically next to the very first line in the design page. Actually it registers the Ajax Control on placing Accordion control on design page.

Note: If you want the Headers of the Accordion control to be Click able i.e. act as a main menu then replace the Menu 1 with <a href="#" style="color:#FFF; text-decoration:none; margin-left:10px;"> Menu 1</a>

Similarly Menu 2 with <a href="#" style="color:#FFF; text-decoration:none; margin-left:10px;"> Menu 2</a> and so on.

Now over to you:

"If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned for more technical updates."

• Tweet
• Share
• Share
• Share

Related Post