Code Snippet posted by:
Jayakumars | Posted on: 9/24/2012 | Category:
jQuery Codes | Views: 718 | Status:
[Member] |
Points: 40
|
Alert Moderator
hi
I have create samples for JQuery Tabs and Accordion Panels
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link type="text/css" href="css/start/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript">
$(function () {
// Accordion
$("#accordion").accordion({ header: "h3" });
// Tabs
$('#tabs').tabs();
});
</script>
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<!-- Accordion -->
<center><h2 class="demoHeaders"> Accordian </h2></center>
<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>
Jesus NEver Fails-I
</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>
Jesus NEver Fails-I
</div>
</div>
</div>
<!-- Tabs -->
<%--<h2 class="demoHeaders">Tabs</h2>--%>
<div id="tabs">
<ul>
<li><a href="#tabs-1">TAB-2010</a></li>
<li><a href="#tabs-2">TAB-2011</a></li>
<li><a href="#tabs-3">TAB-2013</a></li>
</ul>
<div id="tabs-1">
Tab-1
</div>
<div id="tabs-2">
Tab-2
</div>
<div id="tabs-3">
Tab- 3
</div>
</div>
</form>
</body>
</html>
Mark as Answer if its helpful to you
Regards
Email Id: kumaraspcode2009@gmail.com