Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Accordion Menu | jQuery Vertical Accordion Menu Example

Nov 16, 2012
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.

By using jQuery Plugin We can implement accordion menu for that we need to write the code like this

<script type="text/javascript">
$(function () {
$("#accordion").accordion();
});
</script>
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 RSS subscribe by email Subscribe by Email

1 comments :

Atul Yadav said...

Nice one bro..keep it up..

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.