JSFiddle - React, Tailwind, and code Playground

by Madalina Taina

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<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

#prevBtn { display:none;}

JavaScript

$(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()  {
    console.log('nxt');
	var newTabIndex = parseInt(getSelectedTabIndex(1));
	$('#tabs').tabs('select', newTabIndex);
}

function prevOfferTab()  {
	var newTabIndex = parseInt(getSelectedTabIndex(-1));
	$('#tabs').tabs('select', newTabIndex);
}