ACF repeater field content into tabs - wordpress

Question

I'm trying to present a clean easy to use client back end field submission in the WP Admin dashboard that can sort repeater field data into appropriate tabbed content. here is the setup.
Field setup
Backend
Frontend
The code I tried;
<div class="tab-pane fade" id="tab-1-3">
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active">English</li>
<li role="presentation">Spanish</li>
</ul>
<div class="tab-content lang-tab-content">
<div role="tabpanel" class="tab-pane active" id="english">
<?php
$count=0;
if( have_rows('article') ):
while ( have_rows('article') ) : the_row();
?>
<?php if (the_sub_field('language') == 'English') { ?>
<strong>Published Date:</strong> <?php the_sub_field('publised_date');?>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading<?php echo $count ?>">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $count ?>" aria-expanded="false" aria-controls="collapse<?php echo $count ?>">
<?php the_sub_field('article_title');?>
</a>
</h4>
</div>
<div id="collapse<?php echo $count ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading<?php echo $count ?>">
<div class="panel-body">
<?php the_sub_field('article_body');?>
</div>
</div>
</div>
</div>
<?php } ?>
<?php
$count++;
endwhile;
else :
endif;
?>
</div>
<div role="tabpanel" class="tab-pane" id="spanish">Spanish</div>
</div>
</div><!-- tab-pane -->

Answer 1

please show the loop code. Without any information about your code this is pretty hard to answer.
I would simply loop through all the repeater rows and set a class to hide the elements based on the prefered language. Then toggle the class with javascript on button click.
UPDATE
<?php
$count=0; $english =''; $spanish ='';
if( have_rows('article') ):
while ( have_rows('article') ) : the_row();
$count++;
if (the_sub_field('language') == 'English'){
$english .= '<strong>Published Date: '.get_sub_field('publised_date').'</strong>';
$english .= '<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><div class="panel panel-default">';
/** PANEL HEADING **/
$english .= '<div class="panel-heading" role="tab" id="heading'.$count.'">';
$english .= '<h4 class="panel-title">';
$english .= '<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse'.$count.'" aria-expanded="false" aria-controls="collapse'.$count.'">';
$english .= get_sub_field('article_title');
$english .= '</a></h4></div>';
/** END PANEL HEADING **/
/** COLLAPSE START **/
$english .= '<div id="collapse'.$count.'" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading'.$count.'"><div class="panel-body">'.get_sub_field('article_body').'</div></div>';
/** COLLAPS END **/
$english .= '</div></div>';
}
else{
$spanish .= '<strong>Published Date: '.get_sub_field('publised_date').'</strong>';
$spanish .= '<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><div class="panel panel-default">';
/** PANEL HEADING **/
$spanish .= '<div class="panel-heading" role="tab" id="heading'.$count.'">';
$spanish .= '<h4 class="panel-title">';
$spanish .= '<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse'.$count.'" aria-expanded="false" aria-controls="collapse'.$count.'">';
$spanish .= get_sub_field('article_title');
$spanish .= '</a></h4></div>';
/** END PANEL HEADING **/
/** COLLAPSE START **/
$spanish .= '<div id="collapse'.$count.'" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading'.$count.'"><div class="panel-body">'.get_sub_field('article_body').'</div></div>';
/** COLLAPS END **/
$spanish .= '</div></div>';
}
endwhile;
endif;
?>
<div class="tab-content lang-tab-content">
<div role="tabpanel" class="tab-pane active" id="english">
<?php echo $english; ?>
</div>
<div role="tabpanel" class="tab-pane" id="spanish">
<?php echo $spanish; ?>
</div>
</div>

Answer 2

Solved.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active">English</li>
<li role="presentation">spanish</li>
</ul>
</div>
<div class="tab-content lang-tab-content">
<div role="tabpanel" class="tab-pane active" id="english">
<?php $ons=0; if(get_field('own_news')): ?>
<?php while(has_sub_field('own_news')): ?>
<?php if( get_sub_field('language') == 'English' ): ?>
<strong>Published Date:</strong> <?php the_sub_field('publised_date');?>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading<?php echo $ons ?>">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $ons ?>" aria-expanded="false" aria-controls="collapse<?php echo $ons ?>"><?php the_sub_field('article_title');?></a>
</h4>
</div>
<div id="collapse<?php echo $ons ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading<?php echo $ons ?>">
<div class="panel-body">
<?php the_sub_field('article_body');?>
</div>
</div>
</div>
</div>
<?php endif; ?>
<?php $ons++; endwhile; ?>
<?php endif; ?>
</div>
<div role="tabpanel" class="tab-pane" id="spanish">
<?php $ons=200; if(get_field('own_news')): ?>
<?php while(has_sub_field('own_news')): ?>
<?php if( get_sub_field('language') == 'Spanish' ): ?>
<strong>Published Date:</strong> <?php the_sub_field('publised_date');?>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading<?php echo $ons ?>">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $ons ?>" aria-expanded="false" aria-controls="collapse<?php echo $ons ?>"><?php the_sub_field('article_title');?></a>
</h4>
</div>
<div id="collapse<?php echo $ons ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading<?php echo $ons ?>">
<div class="panel-body">
<?php the_sub_field('article_body');?>
</div>
</div>
</div>
</div>
<?php endif; ?>
<?php $ons++; endwhile; ?>
<?php endif; ?>
</div>
</div>