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.