In this article I will show you how you can create accordion
menu using jQuery in your asp.net application. In this I have used div panel to
prepare the accordion menu using css, jQuery.
Some of my previous articles are as follows: jQuery
add remove css class onclick, jQuery
Tooltip With Animation Explode Effect In Asp.Net, Add
Remove Or Change Css Class Using jQuery In Asp.Net, Disable
And Enable Button Using jQuery In Asp.Net,
Cookies
Create, Read and Delete Operation Using jQuery in Asp.Net, Css
Class Change of Button On Radiobutton Selection In Asp.Net Using jQuery, Shaking
Login Box Open Button Click Using jQuery In Asp.Net, Slider
Colorpicker Horizontal Direction Using jQuery in Asp.Net, jQuery
Error Message Display Using Popup Dialog Box In Asp.Net.
So for this article first we will prepare an asp.net application and add the below library reference in header of the page.
So for this article first we will prepare an asp.net application and add the below library reference in header of the page.
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
|
Now add the below html code for displaying the accordion menu.
<div id="accordionMenu"
class="fontsize">
<div class="group">
<h3>Section 1</h3>
<div>
<p><h1>Section 1</h1></p>
</div>
</div>
<div class="group">
<h3>Section 2</h3>
<div>
<p><h1>Section 2</h1> </p>
</div>
</div>
<div class="group">
<h3>Section 3</h3>
<div>
<p><h1>Section 3</h1></p>
</div>
</div>
<div class="group">
<h3>Section 4</h3>
<div>
<p><h1>Section 4</h1></p>
</div>
</div>
<div class="group">
<h3>Section 5</h3>
<div>
<p><h1>Section 5</h1></p>
</div>
</div>
</div>
|
Now we will use the below code to make the menu functional.
<script>
$(function () {
$("#accordionMenu")
.accordion({
header: "> div >
h3"
})
.sortable({
axis: "y",
handle: "h3",
stop: function (event, ui) {
ui.item.children("h3").triggerHandler("focusout");
$(this).accordion("refresh");
}
});
});
</script>
|
Here is the complete code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Accordion
Menu With Sortable Effect in Asp.net</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
/* IE has layout issues when sorting (see #5413) */
.group {
zoom: 1;
}
.fontsize{
font-size:11px;
}
</style>
<script>
$(function () {
$("#accordionMenu")
.accordion({
header: "> div >
h3"
})
.sortable({
axis: "y",
handle: "h3",
stop: function (event, ui) {
ui.item.children("h3").triggerHandler("focusout");
$(this).accordion("refresh");
}
});
});
</script>
</head>
<body>
<div id="accordionMenu"
class="fontsize">
<div class="group">
<h3>Section 1</h3>
<div>
<p><h1>Section 1</h1></p>
</div>
</div>
<div class="group">
<h3>Section 2</h3>
<div>
<p><h1>Section 2</h1> </p>
</div>
</div>
<div class="group">
<h3>Section 3</h3>
<div>
<p><h1>Section 3</h1></p>
</div>
</div>
<div class="group">
<h3>Section 4</h3>
<div>
<p><h1>Section 4</h1></p>
</div>
</div>
<div class="group">
<h3>Section 5</h3>
<div>
<p><h1>Section 5</h1></p>
</div>
</div>
</div>
</body>
</html>
|
Now we have done run the application to check the output.
About the Author
0 comments:
Please let me know your view