Introduction:
Here
I will explain simple jQuery accordion menu example or jQuery simple vertical accordion menu example using jQuery UI library in asp.net.
Description:
In previous article Ajax Accordion menu Example and some other articles create beautiful tooltip, Move Tooltip with mouse move using jQuery library. Now I will explain how to implement simple accordion menu using jQuery UI Library in asp.net.
In previous article Ajax Accordion menu Example and some other articles create beautiful tooltip, Move Tooltip with mouse move using jQuery library. Now I will explain how to implement simple accordion menu using jQuery UI Library in asp.net.
By
using jQuery Plugin We can implement accordion menu for that we need to write
the code like this
|
If
you want to see complete example write the following code in your aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"
/>
<title>jQuery UI Accordion
Example</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"
/>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#accordion").accordion({
heightStyle: "fill"
});
});
</script>
<style type="text/css">
#accordion-resizer
{
width: 450px;
height: 220px;
font-size:10px;
font-family:Calibri;
}
</style>
</head>
<body>
<div id="accordion-resizer">
<div id="accordion">
<h3>Home</h3>
<div>
<p>Welcome to
Aspdotnet-Suresh Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to Aspdotnet-SureshWelcome to
Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to Aspdotnet-SureshWelcome to
Aspdotnet-Suresh.
</p>
</div>
<h3>About</h3>
<div>
<p>Aspdotnet-Suresh offers
Asp.net,C#.net,SQL Server,Web Services,WCF,WPF,MVC,
Crystal Reports,AJAX,XML,JavaScript,JQuery,Gridview articles,
samples and tutorials,code examples of asp.net.
</p>
</div>
<h3>Contact</h3>
<div>
<p>Welcome to
Aspdotnet-Suresh Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to Aspdotnet-SureshWelcome to
Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to Aspdotnet-SureshWelcome to
Aspdotnet-Suresh.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul> </div>
<h3>Advertise</h3>
<div>
<p>Welcome to
Aspdotnet-Suresh Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to Aspdotnet-SureshWelcome to
Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to Aspdotnet-SureshWelcome to
Aspdotnet-Suresh.
</p>
<p>Welcome to
Aspdotnet-Suresh Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to Aspdotnet-SureshWelcome to
Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to Aspdotnet-SureshWelcome to
Aspdotnet-Suresh.
</p>
</div>
</div>
</div>
</body>
</html>
|
Demo
|
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
2 comments :
Nice one bro..keep it up..
And where is the vertical example?
Note: Only a member of this blog may post a comment.