Asp.net Ajax Control Toolkit contains Accordion control, but it is server side control which is heavy weight. We have another alternative of Ajax Accordion Control. We can use JQuery Accordion. Jquery Accordion control is client side control so it is faster that Ajax Accordion control.
In this article I am explaining - How to use JQuery Accordion in ASP.Net?
To use JQuery Accordion first we need to include Jquery plug-in. You can easily download those .CSS and .JS files from jqueryui.com. After downloading those files create your directory structure like this-
http://steptodotnet.blogspot.in/2011/12/jquery-popup-window-in-aspnet.html
In this link you can see the solution structure.
Now here is the code to use Jquery Accordion control-
<head runat="server">
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
<link href="Css/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
<title></title>
<script>
$(function () {
$("#accordion").accordion();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="accordion" style="width: 400px">
<h3>
<a href="#">Section 1</a></h3>
<div>
Section 1 Description
</div>
<h3>
<a href="#">Section 2</a></h3>
<div>
Section 2 Description
</div>
<h3>
<a href="#">Section 3</a></h3>
<div>
Section 3 Description
</div>
</div>
</div>
</form>
</body>
In above code I have included Source files(.js files) and CSS files. Now to make Accordion to work I have written this lines of code-
<script>
$(function () {
$("#accordion").accordion();
});
</script>
Here "accordion" is the name of Div control which contains Child divs, These Child divs will be displayed as Accordion sections.
Output will be like this-
Note-
This example needs JQuery plug-in so after downloading include these files .js and .cs files in your project .
Thanks
No comments:
Post a Comment