Repeater to create bootstrap tabs?

• jez

• August 21, 2015 at 11:47 pm

Is it possible to set up the repeater to create some tabs control on the front of end of the site. Similar to that of a gallery field having the main image and the thumbnail one.

So incorporating the acf repeater to spit out a title for the tab button, then its content further down in the tab itself, then perhaps an id to link the two?

<!-- Nav tabs -->
									<ul class="nav nav-tabs" role="tablist">
										<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Tab 1</a></li>
										<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Tab 2</a></li>
										<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Tab 3</a></li>
										<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Tab 4</a></li>
									</ul>
			
									<!-- Tab panes -->
									<div class="tab-content">
										<div role="tabpanel" class="tab-pane active" id="home">
											<p>Tab 1 content </p>
										</div>
										<div role="tabpanel" class="tab-pane" id="profile">
											<p>Tab 2 content </p>
										</div>
										<div role="tabpanel" class="tab-pane" id="messages">
											<p>Tab 3 content </p>
											
										</div>
										<div role="tabpanel" class="tab-pane" id="settings">
											<p>Tab 4 content </p>
										</div>
									</div>

• John Huebner

• August 25, 2015 at 8:57 am

There are 3 choices to output the parts of a repeater into different sections.

1) Loop through the repeater twice. After the first loop call the function reset_rows() to reset the repeater.

2) Loop through the repeater once show the tabs and store the information to be shown later in an array. Then loop through the array to show the second parts.

3) loop through the repeater once show the tabs and build an HTML string for content parts then echo the content after the last tab.

• jez

• August 25, 2015 at 2:49 pm

Thank you John, not 100% sure how to go about those code wise but i’ll have a look..

• llenolleno

• August 26, 2015 at 6:12 am

I’m interesed too 🙂
Don’t understand how to use the reset_rows()

Can somebody paste here a example?

• John Huebner

• August 26, 2015 at 9:01 am

A repeater loop using the documentation from here http://www.advancedcustomfields.com/resources/have_rows/

if (have_rows('repeater_field')) {
  // first loop
  while(have_rows('repeater_field_name')) {
    the_row();
    // output sub field content
    the_sub_field('sub_field_name');
  }
  
  // reset the rows of the repeater
  reset_rows();
  
  // second loop of same rows
  while(have_rows('repeater_field_name')) {
    the_row();
    // output sub field content
    the_sub_field('sub_field_name');
  }
}

• jez

• August 28, 2015 at 10:19 pm

Thanks John.

Incase anyone is interested here is my code…

<?php 
									$rows = get_field('tab_test');
											echo '<pre>';
												var_dump( $rows );
											echo '</pre>';
											
											if (have_rows('tab_test')) {
											
											   echo'<ul class="nav nav-tabs" role="tablist">';
											  
											  while(have_rows('tab_test')) { the_row();
											    
											   $tab_button = get_sub_field('tab_button');
											    $tab_id = get_sub_field('tab_id');
											  
											   
											    echo' <li role="presentation"><a href="#'.$tab_id.'" aria-controls="'.$tab_button.'" role="tab" data-toggle="tab">';
											    // output sub field content
											    echo''.$tab_button.'';
											    
											    echo'</a></li>';
											    
											  }
											  echo'</ul>';
											  // reset the rows of the repeater
											  reset_rows();
											  echo'<div class="tab-content">';
											  
											  // second loop of same rows
											  while(have_rows('tab_test')) { the_row();
											  
											  
											     $tab_button = get_sub_field('tab_button');
											    $tab_content = get_sub_field('tab_content');
											    $tab_id = get_sub_field('tab_id');
											    
												    echo'<div role="tabpanel" class="tab-pane " id="'.$tab_id.'">';
												  
												    // output sub field content
												    echo''. $tab_content.'';
												    
												    echo'</div>';
											  }
											  echo'</div>';
											}
									
									 ?>

• pb2015

• November 11, 2015 at 12:50 am

Hi, i try to use this your solutions but ech is “null”

Schermata-20....png

• Michael_Njogu

• May 17, 2018 at 10:02 pm

Thanks! This was really helpful!