CMB2 tabs for repeatable groups

cmb2-tabs.md

in fb_init.php (or any other file called from functions.php)

// Custom Admin styles + JS
add_action('admin_enqueue_scripts', function($hook){
  wp_enqueue_style('fb_wp_admin_css', Assets\asset_path('styles/admin.css'));
  wp_enqueue_script('fb_wp_admin_js', Assets\asset_path('scripts/admin.js'), ['jquery'], null, true);
}, 100);

add to manifest.json

"admin.css": {
  "files": [ "styles/admin.scss" ]
},
"admin.js": {
  "vendor": ["assets/scripts/admin.js"]
},

admin.scss

.no-js .cmb2-tabs {
  display: none;
}
.cmb2-tabs .tabs-nav {
  margin: 6px 0 0 10px;
  clear: both;
  overflow: hidden;
}
.cmb2-tabs .tabs-nav li {
  list-style: none;
  float: left;
  position: relative;
  top: 0;
  margin: 1px .2em 0 0;
  padding: 0;
  white-space: nowrap;
  border: 1px #ccc solid;
  background-color: #eee;
}
.cmb2-tabs .tabs-nav li a {
  display: block;
  text-decoration: none;
  font-size: 14px;
  line-height: 18px;
  padding: 10px 20px;
}
.cmb2-tabs .tabs-nav li.current {
   background: #fff;
   border-bottom: 1px #fff solid;
 }
.cmb2-tabs ul li a:focus {
  box-shadow: none
}
.cmb2-tabs .tab-content {
  padding: 10px 20px;
  border: 1px #ccc solid;
  border-bottom: 1px #ccc solid;
  margin-top: -1px;
  background: #fff;
  display: none;
}
.cmb2-tabs .tab-content.current {
  display: block;
}

admin.js

var FB_admin = (function($) {

  function _init() {
    $('body').on('click', '.tabs-nav a', function(e) {
      e.preventDefault();
      var $tabs = $(this).closest('.cmb2-tabs');
      $tabs.find('.tabs-nav li,.tab-content').removeClass('current');
      $(this).parent('li').addClass('current');
      $tabs.find($(this).attr('href').replace('#', '.')).addClass('current');
    });
  }
  // public functions
  return {
    init: _init
  };

})(jQuery);

// Fire up the mothership
jQuery(document).ready(FB_admin.init);

sample repeatable group field

(before_row and after_row used to add markup)

  $cmb_group = new_cmb2_box([
    'id'           => $prefix . 'accordions_group',
    'title'        => esc_html__( 'Accordions', 'cmb2' ),
    'priority'      => 'low',
    'object_types' => ['program', 'workshop', 'page', 'post'],
  ]);
  $group_field_id = $cmb_group->add_field([
    'id'          => $prefix . 'accordions',
    'type'        => 'group',
    'options'     => array(
      'group_title'   => esc_html__( 'Accordion {#}', 'cmb2' ),
      'add_button'    => esc_html__( 'Add Another Accordion', 'cmb2' ),
      'remove_button' => esc_html__( 'Remove Accordion', 'cmb2' ),
      'sortable'      => true,
    ),
  ]);
  $cmb_group->add_group_field($group_field_id, [
    'name'        => 'Accordion Title',
    'id'          => 'accordion_title',
    'type'        => 'text',
    'before_row'   => '
        <div class="cmb2-tabs">
            <ul class="tabs-nav">
                <li class="current"><a href="#tab-content-1">Content</a></li>
                <li><a href="#tab-content-2">Media Block</a></li>
            </ul>
            <div class="tab-content tab-content-1 current">
    ',
  ]);
  $cmb_group->add_group_field($group_field_id, [
    'name'        => 'Accordion Body',
    'id'          => 'accordion_body',
    'type'        => 'wysiwyg',
    'after_row' => '</div>',
  ]);
  $cmb_group->add_group_field($group_field_id, [
    'name'        => 'Video',
    'description' => 'Paste in a Vimeo URL, e.g. https://vimeo.com/101102896',
    'id'          => 'video_url',
    'type'        => 'text',
    'before_row'   => '<div class="tab-content tab-content-2">',
  ]);

  $cmb_group->add_group_field($group_field_id, [
    'name'   => 'Image(s)',
    'id'     => 'images',
    'type'   => 'file_list',
  ]);
  $cmb_group->add_group_field($group_field_id, [
    'name'   => 'Pull-quote',
    'id'     => 'pullquote',
    'type'   => 'textarea_small',
  ]);
  $cmb_group->add_group_field($group_field_id, [
    'name'        => 'Stat Figure',
    'id'          => 'stat_figure',
    'type'        => 'text_small',
    'description' => 'e.g. 99/100',
  ]);
  $cmb_group->add_group_field($group_field_id, [
    'name'        => 'Stat Label',
    'id'          => 'stat_label',
    'type'        => 'textarea_small',
    'description' => 'Statistic caption or context',
    'after_row'    => '
            </div><!-- /.tab-content -->
        </div><!-- /.cmb2-tabs -->
    ',
  ]);

tabs-on-repeatable-block.gif