Toggle Show/Hide Configuration on Mobile - ACF Repeater

Question

I am using the ACF Repeater to create rows of images/content and to show/hide when clicked. Everything looks good on desktop screens, with a row of 3 images, when an image is clicked, the hidden div shows up below and the background color toggles on so you know which image's content you are looking at.

My problem, is I am trying to get the same functionality on mobile, but when an image is clicked, the content shows up under the 3rd div. I want to be below the image that was clicked. Since I am using the ACF repeater, my php script creates the parent div (3 across) first and then the hidden divs below.

I don't mind creating a separate html markup for mobile, I just can't figure out how to make it work with the ACF repeater.

<div class="staff">
<?php if (have_rows('staff_rows')):
while (have_rows('staff_rows')): the_row(); ?>
<div class="staff-wrap">
<div class="staff_images">        
<?php if (have_rows('staff_images')):
while (have_rows('staff_images')): the_row(); ?>
<a href="#/" class="<?php the_sub_field('staff_class'); ?> show staff-box"> 
<img src="<?php the_sub_field('staff_image'); ?>"><div class="image-box"><h3> 
<?php the_sub_field('staff_name'); ?></h3>
     <h3><?php the_sub_field('staff_position'); ?></h3></div>
  </a>

 <?php endwhile;
 endif; ?>
<?php if (have_rows('staff_bios')):
 while (have_rows('staff_bios')): the_row(); ?>
 <div class="bios">
<div class="wrap">
<div class="<?php the_sub_field('bio_class'); ?> row"><?php 
the_sub_field('bio_text'); ?></div>
</div>
</div>
<?php endwhile;
endif; ?>
</div>

http://toolboxdevmachine.com/TechNiche/about-us

Thanks for your help

Why are you having independent ACF repeaters for images and bios? Can't you add them as simple fields under staff_rows repeater itself? — Outsource WordPress
I tried that before and there was some reason that I can't recall that I had to make two repeaters. I think maybe the toggle....I can't remember what it was. — toolbox3
You should add the appropriate bio in same staff name <div>, else it will be too difficult in positioning the bio in mobile - same for desktop, try another row. — Outsource WordPress
so I included the bios in the first repeater. But the problem I am having is, that the employee boxes are not side by side anymore. They are vertically aligned, one on top of another. toolboxdevmachine.com/TechNiche/about-us — toolbox3

Andrew Andrew · Accepted Answer · 2019-02-06T20:49:21

I'm guessing you've already figured this out by now, in 2019. It looks like you are missing a few closing <div> tags, as well as ending your while loop and the primary conditional. I broke out the code, indented it and wrote it with the correct closing tags:

<div class="staff">
  <?php if (have_rows('staff_rows')):
    while (have_rows('staff_rows')): the_row(); ?>
      <div class="staff-wrap">
        <div class="staff_images">        
          <?php if (have_rows('staff_images')):
            while (have_rows('staff_images')): the_row(); ?>
              <a href="#/" class="<?php the_sub_field('staff_class'); ?> show staff-box"> 
                <img src="<?php the_sub_field('staff_image'); ?>">
                <div class="image-box">
                  <h3><?php the_sub_field('staff_name'); ?></h3>
                  <h3><?php the_sub_field('staff_position'); ?></h3>
                </div>
              </a>
            <?php endwhile;
          endif; ?>
          <?php if (have_rows('staff_bios')):
            while (have_rows('staff_bios')): the_row(); ?>
            <div class="bios">
              <div class="wrap">
                <div class="<?php the_sub_field('bio_class'); ?> row">
                  <?php the_sub_field('bio_text'); ?>
                </div>
              </div>
            </div>
          <?php endwhile;
        endif; ?>
      </div>
    </div>
  <?php endwhile; ?>
<?php endif; ?>

Toggle Show/Hide Configuration on Mobile - ACF Repeater

1 Answers