How to Add JQuery Tabs And Accordion Panel

Jayakumars
Posted by Jayakumars under jQuery category on | Points: 40 | Views : 2052
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>

Comments or Responses

Login to post response