How to Add JQuery Tabs And Accordion Panel

Posted by Jayakumars under jQuery category on 9/24/2012 | Points: 40 | Views : 2650

Post Code |

Search Codes |

Code Home

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>

Alert Moderator

Bookmark It

Comments or Responses

Latest Code Snipptes