1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
-------------------------------------------------------
-------------------------------------------------------
Code HTML
--------------------------------------------------------
--------------------------------------------------------

<div id="tab-container" class="tab-container">							  
<ul class='etabs'>
<li class='tab'><a href="#tabs1-html">HTML Markup</a></li>
<li class='tab'><a href="#tabs1-js">Required JS</a></li>
<li class='tab'><a href="#tabs1-css">Example CSS</a></li>
</ul>

<div id="tabs1-html">
<h2>HTML Markup for these tabs</h2>
<!-- content -->
</div>

<div id="tabs1-js">
<h2>JS for these tabs</h2>
<!-- content -->
</div>

<div id="tabs1-css">
<h2>CSS Styles for these tabs</h2>
<!-- content -->
</div>

</div>

-------------------------------------------------------
-------------------------------------------------------
Code HTML Ends
--------------------------------------------------------
--------------------------------------------------------


-------------------------------------------------------
-------------------------------------------------------
Code JS
--------------------------------------------------------
--------------------------------------------------------

jQuery(document).ready(function(){	
	$('#tab-container').easytabs();
});

-------------------------------------------------------
-------------------------------------------------------
Code JS Ends
--------------------------------------------------------
--------------------------------------------------------


-------------------------------------------------------
-------------------------------------------------------
Code CSS
--------------------------------------------------------
--------------------------------------------------------

.etabs { margin: 0; padding: 0; }
.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
.tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
.tab a:hover { text-decoration: underline; }
.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
.tab a.active { font-weight: bold; }
.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }


-------------------------------------------------------
-------------------------------------------------------
Code CSS Ends
--------------------------------------------------------
--------------------------------------------------------