bratsun
5/22/2015 - 1:45 PM

Bootstrap tabs based on nestedbox (Tabs (nb) -> Tab (nb))

Bootstrap tabs based on nestedbox (Tabs (nb) -> Tab (nb))

<?php $ids = array(); ?>
<div role="tabpanel" class="tabpanel f-<?php print str_replace('_','-',str_replace('field_','',$element['#field_name'])); ?> <?php print $classes; ?>"<?php print $attributes; ?>>

  <ul class="nav nav-tabs" role="tablist">
    <?php foreach ($items as $delta => $item): ?>    	
      <?php 
		reset($item['nestedbox']);
		$eid = key($item['nestedbox']);
		$nb = entity_load_single('nestedbox', $eid);
		$title = field_get_items('nestedbox', $nb, 'field_tab_title');
		$id = preg_replace('/\s*/', '', strtolower($title[0]['value']));
	  	if (!isset($GLOBALS['tabcounter'])){
		  $GLOBALS['tabcounter'] = 1;
		} else {
		  $GLOBALS['tabcounter']++;
		}
	  	$id = $id . '-' . $GLOBALS['tabcounter'];
	  	$ids[] = $id;
      ?>	
	  <li role="presentation">
      	<a href="#<?php print $id; ?>" aria-controls="<?php print $id; ?>" role="tab" data-toggle="tab"><?php print $title[0]['value']; ?></a>
      </li>
    <?php endforeach; ?>
  </ul>	
  
  <div class="tab-content">
    <?php foreach ($items as $delta => $item): ?>
      <div id="<?php print $ids[$delta]; ?>" class="tab-pane fade <?php print ' field-item-'.($delta+1); ?>">
      	<?php print render($item); ?>
      </div>
    <?php endforeach; ?>
  </div>

</div>
// tabs

$('.tabpanel a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
});

$('.tabpanel').each(function(){
  var t = $(this);
  t.find('.nav > li:first, .tab-content > .tab-pane:first').addClass('active');
  t.find('.tab-content > .tab-pane:first').addClass('in');
});