How to Add JQuery Tabs And Accordion Panel

Posted by Jayakumars under jQuery category on | Points: 40 | Views : 2650

I have create samples for JQuery Tabs and Accordion Panels

<html xmlns="">
<head runat="server">
<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
<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;}


<form id="form1" runat="server">
<!-- Accordion -->
<center><h2 class="demoHeaders"> Accordian </h2></center>
<div id="accordion">
<h3><a href="#">First</a></h3>
Jesus NEver Fails-I
<h3><a href="#">Second</a></h3>

Jesus NEver Fails-I


<!-- Tabs -->
<%--<h2 class="demoHeaders">Tabs</h2>--%>
<div id="tabs">
<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>
<div id="tabs-1">
<div id="tabs-2">
<div id="tabs-3">
Tab- 3


Comments or Responses

Login to post response