Support

Account

Home Forums Add-ons Repeater Field ACF repeater field content into tabs

Unread

ACF repeater field content into tabs

  • 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
    Field setup

    Backend
    Backend

    Frontend
    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 -->
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.