ACF repeater field content into tabs

• Jude

• October 23, 2017 at 11:33 am

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 structure upto now is;

<div class="tab-pane fade" id="tab-1-3">

                                <ul class="nav nav-pills" role="tablist">
                                  <li role="presentation" class="active"><a href="#english" aria-controls="english" role="tab" data-toggle="tab">English</a></li>
                                  <li role="presentation"><a href="#spanish" aria-controls="spanish" role="tab" data-toggle="tab">Spanish</a></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 -->