Hi again,
I had a look at your page.
As a word of warning: you are including jQuery three times.
This is almost never a good idea.
Anyway, I got to the bottom of your problem.
You should initialize the menu as collapsible, thus:
$('#tab-container').easytabs({
collapsible: true,
collapsedByDefault: true
});
I’ve also amended the code to make the tabs navigable.
Here’s a demo.
And to be complete, here’s the code:
<html>
<head>
<title>EasyTabs Demo</title>
<script type='text/javascript' src='http://d.perich.com/a2ru/wp-content/themes/a2ru/js/jquery-1.7.1.min.js?ver=3.5.1'></script>
<script type='text/javascript' src='http://d.perich.com/a2ru/wp-content/themes/a2ru/js/jquery.hashchange.min.js?ver=3.5.1'></script>
<script type='text/javascript' src='http://d.perich.com/a2ru/wp-content/themes/a2ru/js/jquery.easytabs.js?ver=3.5.1'></script>
<style>
.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; }
.panel-container { margin-bottom: 10px; }
.prev-tab{margin-right:15px}
</style>
</head>
<body>
<div id="tab-container" class='tab-container'>
<ul class='etabs'>
<li class='tab'><a href="#tab1">Tab 1</a></li>
<li class='tab'><a href="#tab2">Tab 2</a></li>
<li class='tab'><a href="#tab3">Tab 3</a></li>
</ul>
<div class='panel-container'>
<div id="tab1" class="panel">
<h2>Tab 1</h2>
<p>
Lorizzle ipsum dizzle sizzle amizzle, fo shizzle adipiscing elit. Nullam sapizzle velit, aliquet volutpizzle, izzle boom shackalack,
own yo' vel, arcu. Pellentesque tortizzle. Doggy eros. Cool bling bling yippiyo dapibizzle its fo rizzle stuff shiz. Mauris pellentesque
nibh owned turpis. Get down get down uhuh ... yih! tortor. Pellentesque mah nizzle rhoncizzle uhuh ... yih!. In go to hizzle habitasse
platea fo shizzle mah nizzle fo rizzle, mah home g-dizzle. Bow wow wow dapibizzle. Curabitizzle tellizzle stuff, pretizzle fizzle, mattis
yo mamma, eleifend vitae, nunc. Bling bling suscipit. Integizzle gizzle velit sizzle hizzle.
</p>
<p>
Ghetto a magna sed augue phat accumsizzle. Aenizzle i'm in the shizzle my shizz. Vivamizzle **** dolizzle, viverra sheezy,
yo izzle, yo izzle, erizzle. Sure dope bling bling gangsta in faucibus pot luctizzle sheezy black posuere cubilia Fo shizzle;
Dang dolizzle. Integer faucibus. Ass pharetra blandizzle quizzle. Shizzle my nizzle crocodizzle rutrizzle its fo rizzle orci.
Dope facilisis. Mauris sem tellivizzle, dawg eu, scelerisque gangster, blandizzle ac, gangsta.
</p>
</div>
<div id="tab2" class="panel">
<h2>Tab 2</h2>
<p>
Ghetto a magna sed augue phat accumsizzle. Aenizzle i'm in the shizzle my shizz. Vivamizzle **** dolizzle, viverra sheezy,
yo izzle, yo izzle, erizzle. Sure dope bling bling gangsta in faucibus pot luctizzle sheezy black posuere cubilia Fo shizzle;
Dang dolizzle. Integer faucibus. Ass pharetra blandizzle quizzle. Shizzle my nizzle crocodizzle rutrizzle its fo rizzle orci.
Dope facilisis. Mauris sem tellivizzle, dawg eu, scelerisque gangster, blandizzle ac, gangsta.
</p>
</div>
<div id="tab3" class="panel">
<h2>Tab 3</h2>
<p>
In uhuh ... yih! its fo rizzle nizzle rizzle. Get down get down things, arcu i'm in the shizzle malesuada facilisis, owned yippiyo aliquet pimpin',
nizzle brizzle ghetto break it down a shizznit. Suspendisse volutpat uhuh ... yih! fo shizzle my nizzle. Sed fizzle lectizzle ut libero.
Proin consectetizzle break yo neck, yall sapizzle. Etizzle aliquizzle, sizzle we gonna chung its fo rizzle things, stuff sem sheezy tellivizzle,
ac cool erizzle nisi sizzle rizzle purus. Maecenizzle for sure tortizzle vizzle pot. Phasellus stuff. My shizz we gonna chung lacizzle,
convallis nizzle, aliquet sit fo shizzle, pulvinar egestas, shizzle my nizzle crocodizzle. Vivamus owned. Doggy ante crazy sure in
ghetto phat luctizzle fizzle fo posuere cubilia I saw beyonces tizzles and my pizzle went crizzle; In eu elizzle eu enizzle bibendizzle
i'm in the shizzle. Cool est tortizzle, vulputate uhuh ... yih!, semper doggy, commodo da bomb, nisi. Etiam feugizzle, fo shizzle
my nizzle boofron vehicula luctus, lorem justo daahng dawg lorem, we gonna chung viverra mi urna fizzle erizzle.
</p>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs({
collapsible: true,
collapsedByDefault: true
});
var $tabContainer = $('#tab-container'),
$tabs = $tabContainer.data('easytabs').tabs,
$tabPanels = $(".panel")
totalSize = $tabPanels.length;
$tabPanels.each(function(i){
if (i+1 != totalSize) {
next = i + 1;
$(this).prepend("<a href='#' class='next-tab btn success' rel='" + next + "'>Next Tab »</a>");
} else {
$(this).prepend("<span class='next-tab btn'>Next Tab »</span>");
}
if (i != 0) {
prev = i - 1;
$(this).prepend("<a href='#' class='prev-tab btn success' rel='" + prev + "'>« Prev Tab</a>");
} else {
$(this).prepend("<span class='prev-tab btn'>« Prev Tab</span>");
}
});
$('a.next-tab, a.prev-tab').click(function() {
var i = parseInt($(this).attr('rel'));
var tabSelector = $tabs.children('a:eq(' + i + ')').attr('href');
$tabContainer.easytabs('select', tabSelector);
return false;
});
});
</script>
</body>
</html>
This should do everything you want.
I’ve left the default styling from the plugin’s demo page. I’ll leave it to you to adapt it to your site’s theme.
HTH
