Implement accordion menu using AJAX and JQuery

Sourav.Kayal
Posted by in jQuery category on for Beginner level | Points: 250 | Views : 8583 red flag

This article will show accordion menu implementation using JQuery

Accordion menu using JQuery And asp.net AJAX accordion control

In this article we are going to look two different  ways to implementing accordion menu in web development. The first approach is using AJAX accordion tool in asp.net and second is by using JQuery in normal .html page. 

Implement Accordion menu using AJAX in asp.net

To implement accordion using AJAX Toolkit in asp.net we have to download AJAX Toolkit at first. If you are new in ajax, I would recommend you to study ajax first. Once you download AJAX Toolkit ,you will get ajax toolkit .dll and if you add this .dll file in your visual studio toolbox ,you will get all ajax tool in your toolbox of Visual studio. And don’t forget to use .NET framework 4.0 or upper to work with ajax.

Here is sample code example to accordion panel.

<%@Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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></title>
<style type="text/css">
.accordionContent {
background-color: #D3DEEF;
border-color: -moz-use-text-color #2F4F4F #2F4F4F;
border-right: 1px dashed #2F4F4F;
border-style: none dashed dashed;
border-width: medium 1px 1px;
padding: 10px 5px 5px;
width:20%;
}
.accordionHeaderSelected {
background-color: #5078B3;
border: 1px solid #2F4F4F;
color: white;
cursor: pointer;
font-family: Arial,Sans-Serif;
font-size: 12px;
font-weight: bold;
margin-top: 5px;
padding: 5px;
width:20%;
}
.accordionHeader {
background-color: #2E4D7B;
border: 1px solid #2F4F4F;
color: white;
cursor: pointer;
font-family: Arial,Sans-Serif;
font-size: 12px;
font-weight: bold;
margin-top: 5px;
padding: 5px;
width:20%;
}
.href
{
color:White;
font-weight:bold;
text-decoration:none;
}
</style>
 
</head>
<body>
    <form id="form1" runat="server">
    <div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Accordion ID="UserAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"             FadeTransitions="true" SuppressHeaderPostbacks="true" TransitionDuration="250"
            FramesPerSecond="40" RequireOpenedPane="false" AutoSize="None" Width="971px" >
<Panes>
<asp:AccordionPane ID="AccordionPane1" runat="server">
<Header><a href="#" class="href">Panel1</a></Header>
<Content>
    Content of panel 1
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="AccordionPane2" runat="server">
<Header><a href="#" class="href">Panel 2</a></Header>
<Content>
    Content of panel 2
</Content>
</asp:AccordionPane>
<asp:AccordionPane ID="AccordionPane3" runat="server">
<Header><a href="#" class="href">Panel 3</a> </Header>
<Content>
    Content of Panel 3
</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
    </div>
    </form>
</body>
</html>
 

And don’t forget to add below line. (It’s already added in above code)

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

This line will register the assembly in current page. The value of TagPrefix will be tagprefix of all ajax control. If you want different namespace or tagprefix, you are allowed to change that value.


Implement Accordion menu using JQuery

In this example we will look into how to implement accordion menu using JQuery . I hope you are familiar with JQuery and want to see example. If you are not familiar with basic of JQuery below few lines are for you.

JQuery is nothing but JavaScript library. We can say, it’s a collection of functions. We can use those ready made functions to speed up our development. It’s free to download and use. We can keep those javaScript file in our own server or we can just call it from JQuery CDN (like Google / Jquery.com etc).

Let’s see below example to create accordion menu using JQuery

<!DOCTYPE html>
<html lang="en">
<head>
            <meta charset="utf-8">
            <title>jQuery UI Accordion - Default functionality</title>
            <link rel="stylesheet" href="http://ui-dev.jquery.com/themes/base/jquery.ui.all.css">
            <script src="http://ui-dev.jquery.com/jquery-1.8.2.js"></script>
            <script src="http://ui-dev.jquery.com/ui/jquery.ui.core.js"></script>
            <script src="http://ui-dev.jquery.com/ui/jquery.ui.widget.js"></script>
            <script src="http://ui-dev.jquery.com/ui/jquery.ui.accordion.js"></script>
            <link rel="stylesheet" href="http://ui-dev.jquery.com/demos/demos.css">
            <script>
            $(function() {
                        $( "#accordion" ).accordion();
            });
            </script>
</head>
<body>
 
<div class="demo" style="width:700px">
 
<div id="accordion">
            <h3><a href="#">Panel 1</a></h3>
            <div>
                        Contentof panel 1
            </div>
            <h3><a href="#">Panel 2</a></h3>
            <div>       Content of Panel 2
                       
            </div>
            <h3><a href="#">Panel3</a></h3>
            <div>
                        Content of panel 3
            </div>
            <h3><a href="#">Panel 4 </a></h3>
            <div>
                        content of Panel 4
            </div>
</div>
</div><!--End demo -->
</body>
</html>
 


If you look header section of HTML code, you can find there are calls to various javaScript codes hosted by jquery CDN. Those are nothing but JQuery library.

Conclusion : Those are two style to create accordion menu in web development. If you want to develop application using asp.net I will recommend you to implement AJAX  and if you are simple web designer or want to use PHP then second option is open for you.

Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)