Dynamic tabs that switch to an accordion on mobile.

_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;
	}
}

acf-export.php

if(function_exists("register_field_group"))
{
	register_field_group(array (
		'id' => 'acf_content-options',
		'title' => 'Content Options',
		'fields' => array (
			array (
				'key' => 'field_52d6ee25c80da',
				'label' => 'Content Options',
				'name' => 'content_options',
				'type' => 'flexible_content',
				'layouts' => array (
					array (
						'label' => 'Tabbed Content',
						'name' => 'tabbed_tabs',
						'display' => 'row',
						'min' => '',
						'max' => '',
						'sub_fields' => array (
							array (
								'key' => 'field_52ded4e47e6c9',
								'label' => 'Tab Section Title',
								'name' => 'tab_sect_title',
								'type' => 'text',
								'instructions' => 'Title to appear above the tabs',
								'column_width' => '',
								'default_value' => '',
								'placeholder' => '',
								'prepend' => '',
								'append' => '',
								'formatting' => 'none',
								'maxlength' => '',
							),
							array (
								'key' => 'field_52ded50e7e6ca',
								'label' => 'The Tabs',
								'name' => 'the_tabbys',
								'type' => 'repeater',
								'column_width' => '',
								'sub_fields' => array (
									array (
										'key' => 'field_52ded52e7e6cb',
										'label' => 'Tab Title',
										'name' => 'tab_title',
										'type' => 'text',
										'instructions' => 'Title of the tab',
										'column_width' => '',
										'default_value' => '',
										'placeholder' => '',
										'prepend' => '',
										'append' => '',
										'formatting' => 'none',
										'maxlength' => '',
									),
									array (
										'key' => 'field_52ded5487e6cc',
										'label' => 'Tab Content',
										'name' => 'tab_content',
										'type' => 'wysiwyg',
										'instructions' => 'Content to appear within the tab',
										'column_width' => '',
										'default_value' => '',
										'toolbar' => 'full',
										'media_upload' => 'yes',
									),
								),
								'row_min' => '',
								'row_limit' => '',
								'layout' => 'row',
								'button_label' => 'Add Tab',
							),
						),
					),
				),
				'button_label' => 'Add Row',
				'min' => '',
				'max' => '',
			),
		),
		'location' => array (
			array (
				array (
					'param' => 'post_type',
					'operator' => '==',
					'value' => 'page',
					'order_no' => 0,
					'group_no' => 0,
				),
				array (
					'param' => 'page',
					'operator' => '!=',
					'value' => '2',
					'order_no' => 1,
					'group_no' => 0,
				),
			),
		),
		'options' => array (
			'position' => 'normal',
			'layout' => 'no_box',
			'hide_on_screen' => array (
			),
		),
		'menu_order' => 0,
	));
}

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");
        });
    });