_part-tabs.scss

.tabs{
	margin: {top:40px;}
	&:last-child{
		margin: {bottom:80px;}
	}
	h2{
		color: $color-1;
		font: {
			size: emCalc(36px);
		}
	}
}
.tabbers,
.tabs__title{
	@include col(12);
}
.tabbers__nav{
	@include col(12, $collapse: true);
	float: left;
	padding: 0;
	margin: {left:0;bottom:0;}
	list-style: none;
	li{
		float: left;
		oveflow: hidden;
		position: relative;
		padding: 15px 10px;
		margin: {right:10px;}
		color: $white;
		font: {
			famin: $fam-heading;
		}
		text-decoration: none;
		background: $color-2;
		border-bottom: none;
		cursor: pointer;
		&:hover{
			background: $color-1;
		}
		&.active{
			display: block;
		}
	}
	a{
		@include transition(400ms);
		width: 100%;
	}
	@include bp($solarsystem) {
	    display:none;
	}
}
.tab__wrapper{
	clear: both;
	overflow: hidden;
	background: $white;
}
.tab__content{
	@include col(12);
	display: none;
	padding: {top:10px; bottom:20px;}
	box-shadow: none;
}
.tab_drawer_heading { 
	display: none; 
	@include bp($solarsystem) {
		display: block;
		margin: 0;
		padding: 5px 20px;
		color: #fff;
		font: {
			size: emCalc(18px);
		}
		background-color: $color-2;
		border: 1px solid #333;
		border-bottom: none;
		cursor: pointer;
	}
}

page-tabs.php

<section class="tabs">
	<div class="tabs__inner">
		<div class="tabs__title">
			<h2><?php the_sub_field('tab_sect_title') ?></h2>
		</div> <!-- //tabs__title -->
		<?php if(have_rows('the_tabbys')): ?>
			<div class="tabbers">
					<ul class="tabbers__nav">
					<?php $i = 1; while(have_rows('the_tabbys')): the_row(); ?>
						<li rel="tab-<?php echo $i++; ?>"><?php the_sub_field('tab_title');?></li>
					<?php endwhile; ?>
					</ul>
				<?php $i = 1; $v = 1; while(have_rows('the_tabbys')): the_row(); ?>
					<div class="tab__wrapper">
						<p class="tab_drawer_heading" rel="tab-<?php echo $i++; ?>"><?php the_sub_field('tab_title');?></p>
						<div id="tab-<?php echo $v++; ?>" class="tab__content">
							<h3><?php the_sub_field('tab_title');?></h3>
							<?php the_sub_field('tab_content');?>
						</div> <!-- //tab__content -->
					</div> <!-- //tab__wrapper -->
				<?php endwhile; ?>
			</div> <!-- //tabbers -->
		<?php endif; ?>
	</div> <!-- //__inner -->
</section> <!-- //tabs -->

scripts.js

var $tabCnt = 0;
    $('.tabs').each(function(){
        $tabCnt++;
        $(this).find('.tab_drawer_heading').each(function(){
            var hRel = $(this).attr('rel');
            var hRelVal = hRel + '-' + $tabCnt;
            $(this).attr('rel',hRelVal);
        });
        $(this).find('.tabbers__nav li').each(function(){
            var liRel = $(this).attr('rel');
            var liRelVal = liRel + '-' + $tabCnt;
            $(this).attr('rel',liRelVal);
        });
        $(this).find('.tab__content').each(function(){
            var divId = $(this).attr('id');
            var divIdVal = divId + '-' + $tabCnt;
            $(this).attr('id',divIdVal);
        });
    });
    $('.tabs').each(function(){
        var findTab = $(this).find('.tab__content');

        findTab.hide();
        findTab.first().show();  
            /* if in tab mode */
        $(this).find("ul.tabbers__nav li").click(function () {

            findTab.hide();
            var activeTab = $(this).attr("rel");
            $("#" + activeTab).fadeIn();

            $("ul.tabbers__nav li").removeClass("active");
            $(this).addClass("active");

            $(".tab_drawer_heading").removeClass("d_active");
            $(".tab_drawer_heading[rel^='" + activeTab + "']").addClass("d_active");

        });
        $(this).find(".tab_drawer_heading").click(function () {

            findTab.hide();
            var d_activeTab = $(this).attr("rel");
            $("#" + d_activeTab).fadeIn();

            $(".tab_drawer_heading").removeClass("d_active");
            $(this).addClass("d_active");

            $("ul.tabbers__nav li").removeClass("active");
            $("ul.tabbers__nav li[rel^='" + d_activeTab + "']").addClass("active");
        });
    });