How to implement next and previous in Jquery UI Tabs

Yasser Shaikh
Aug 6, 2013 · 2 min read
Jquery-Ui-Tab-Next-Prev
Jquery-Ui-Tab-Next-Prev

Before we begin with this tutorial, I will quickly jot down the JavaScript files we will be needing to get this working,

STEP 1 JQUERY UI TAB WITHOUT PREV/NEXT FUNCTIONALITY : Fiddle it !

Jquery-Ui-Tab
Jquery-Ui-Tab

Html: Fiddle it !

<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1 Header</a></li>
<li><a href="#tabs-2">Tab 2 Header</a></li>
<li><a href="#tabs-3">Tab 3 Header</a></li>
</ul>
<div id="tabs-1">
<p>Tab1 content.</p>
</div>
<div id="tabs-2">
<p>Tab2 content.</p>
</div>
<div id="tabs-3">
<p>Tab3 content.</p>
</div>
</div>

Jquery Fiddle it !

$(document).ready(function(){
$("#tabs").tabs();
});

STEP 2 JQUERY UI TAB WITH PREV/NEXT FUNCTIONALITY : Fiddle it !

Jquery-Ui-Tab-Next-Prev
Jquery-Ui-Tab-Next-Prev

Html: Fiddle it !

<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1 Header</a></li>
<li><a href="#tabs-2">Tab 2 Header</a></li>
<li><a href="#tabs-3">Tab 3 Header</a></li>
</ul>
<div id="tabs-1">
<p>Tab1 content.</p>
</div>
<div id="tabs-2">
<p>Tab2 content.</p>
</div>
<div id="tabs-3">
<p>Tab3 content.</p>
</div>
<input type="button" class="btn btn-primary" id="prevBtn" value="Prev" />
<input type="button" class="btn btn-primary" id="nextBtn" value="Next" />
</div>Css: Fiddle it !#prevBtn { display:none;}Jquery: Fiddle it !$(document).ready(function(){
$("#tabs").tabs();
$("#prevBtn").bind("click", prevOfferTab);
$("#nextBtn").bind("click", nextOfferTab);
});
function getSelectedTabIndex(change) {
var $tabs = $('#tabs').tabs();
var selected = $tabs.tabs('option', 'selected') + change;
if (selected == 0) {
$("#prevBtn").hide();
}
else {
$("#prevBtn").show();
}
var tabsCount = this.$('#tabs').tabs('length') -1;
if (selected == tabsCount) {
$("#nextBtn").hide();
}
else {
$("#nextBtn").show();
}
return selected;
}
function nextOfferTab() {
var newTabIndex = parseInt(getSelectedTabIndex(1));
$('#tabs').tabs('select', newTabIndex);
}
function prevOfferTab() {
var newTabIndex = parseInt(getSelectedTabIndex(-1));
$('#tabs').tabs('select', newTabIndex);
}
Further Reading:

Yasser Shaikh's blog

It's supposed to be automatic, but actually you have to push this button.

Yasser Shaikh

Written by

Yasser Shaikh's blog

It's supposed to be automatic, but actually you have to push this button.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade