V24s

"Get Updates : Subscribe to our e-mail newsletter to receive updates........" "Good Luck frnds" Admission 2018 Application Form 2018 Colleges Entrance Exam 2018 Results 2018 Notification 2018 University Educational Jobs 2018 Government Jobs 2018

Search This Blog v24s guys

Follow by Email

15 April, 2013

jQuery Simple Accordion Menu Example in Asp.net

Introduction

Here I will explain 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

Post a Comment

Popular Posts

Recent Posts

Google Analytics