Repeater field toggle showing incorrect content

• kiaramelissa

• June 9, 2018 at 9:08 pm

Hey everyone… I have a bit of a strange issue, which would possibly be simple but im just missing it! So any help at all will be so appreciated!

Below is the code I am using, along with a toggle function that I have also included below.

<div class="team-members">
			
<?php if( have_rows('team') ): ?>

	<ul>

	<?php while( have_rows('team') ): the_row(); 

		// vars
		$image = get_sub_field('image');
		$name = get_sub_field('name');
		$position = get_sub_field('position');
		$description = get_sub_field('extended_description');
		?>
		<li class="team-member-select team-toggle">

		<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
<h3>
	<?php echo $name; ?>
			</h3>
			<h4>
				<?php echo $position; ?>
			</h4>
		</li>
		
<div class="team-member-open">
		<p class="team-close">
		X
			</p>
	<div class="team-left">
		<img src="<?php echo $image['url']; ?>">
	</div>
	<div class="team-right">
		<h3>
			<?php echo $name; ?>
		</h3>
		<h4>
				<?php echo $position; ?>
			</h4>
		<?php echo $description; ?>
	</div>
		
		</div>
		
	<?php endwhile; ?>

	</ul>

<?php endif; ?>
			
		</div>

Toggle function:

	
$(".team-close").click(function(){
    $(".team-member-open").hide( "ease" );
});

$(".team-toggle").click(function(){
    $(".team-member-open").show( "ease" );
});

Everything works beautifully! Each item shows up as it should.

Below is an image of the boxes, with the image, name and title. All working as it should.

When any of these boxes is clicked, the div below appears:

The only issue is the content is always the same no matter which box is clicked.

I was hoping for it to show the information relative to the box clicked however I must be missing something.

Anybody have any ideas on how I could fix this?