I’m working with WordPress and ACF Flexible content, I create a jquery function that will show and hide certain elements for each Flexible content block but it’s showing/hides elements on the full page instead of the section.
here is my code for the ACF loop:
<?php if ( have_rows( 'staff_members' ) ): ?>
<?php while ( have_rows( 'staff_members' ) ) : the_row(); ?>
<?php if ( get_row_layout() == 'staff_members' ) : ?>
<?php if ( have_rows( 'member' ) ) : ?>
<?php while ( have_rows( 'member' ) ) : the_row();
if( get_row_index() % 2 == 0 ){
?>
<div class="container-fluid staff-member-holder staff-member-holder-bg-left">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-9 ">
<div class="staff-content-container">
<a class="close-bio">x</a>
<h2><?php the_sub_field( 'name' ); ?></h2>
<h3><?php the_sub_field( 'position' ); ?></h3>
<div class="short-contend">
<p><?php $value = wp_trim_words(get_sub_field('bio'), 274);
echo $value; ?></p>
</div>
<div class="additional-content">
<?php the_sub_field( 'bio' ); ?>
</div>
<?php if ( have_rows( 'social_links' ) ) : ?>
<ul>
<?php while ( have_rows( 'social_links' ) ) : the_row(); ?>
<li>
<a href="<?php the_sub_field( 'link' ); ?>">
<?php the_sub_field( 'link_label' ); ?>
</a>
</li>
<?php endwhile; ?>
</ul>
<?php else : ?>
<?php // No rows found ?>
<?php endif; ?>
<div class="cp-image-with-slideout__panel-learn-more" data-animate="fade" data-direction="right" data-distance="850" data-delay="750" data-speed="1.5" data-animate-processing="true" data-animate-processed="true">
<a class="cp-image-with-slideout__panel-learn-more-button">
View Profile </a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-3">
<?php $image = get_sub_field( 'image' ); ?>
<?php if ( $image ) : ?>
<img src="<?php echo esc_url( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>" />
<?php endif; ?>
</div>
</div>
</div>
<?php } else { ?>
<div class="container-fluid staff-member-holder staff-member-holder-bg-right">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-3 p-0 d-flex justify-content-end">
<a class="close-bio">x</a>
<?php $image = get_sub_field( 'image' ); ?>
<?php if ( $image ) : ?>
<img src="<?php echo esc_url( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>" />
<?php endif; ?>
</div>
<div class="col-sm-12 col-md-12 col-lg-9 staff-member-holder p-0">
<div class="staff-content-container">
<h2><?php the_sub_field( 'name' ); ?></h2>
<h3><?php the_sub_field( 'position' ); ?></h3>
<div class="additional-content">
<?php the_sub_field( 'bio' ); ?>
</div>
<div class="short-contend">
<p><?php $value = wp_trim_words(get_sub_field('bio'), 50);
echo $value; ?></p>
</div>
<?php if ( have_rows( 'social_links' ) ) : ?>
<ul>
<?php while ( have_rows( 'social_links' ) ) : the_row(); ?>
<li>
<a href="<?php the_sub_field( 'link' ); ?>">
<?php the_sub_field( 'link_label' ); ?>
</a>
</li>
<?php endwhile; ?>
</ul>
<?php else : ?>
<?php // No rows found ?>
<?php endif; ?>
<div class="cp-image-with-slideout__panel-learn-more" data-animate="fade" data-direction="right" data-distance="850" data-delay="750" data-speed="1.5" data-animate-processing="true" data-animate-processed="true">
<a class="cp-image-with-slideout__panel-learn-more-button">
View Profile </a>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
<?php endwhile; ?>
<?php else : ?>
<?php // No rows found ?>
<?php endif; ?>
<?php endif; ?>
<?php endwhile; ?>
<?php else: ?>
<?php // No layouts found ?>
<?php endif; ?>
Here is my scritpt, like I mentioned before, it’s working like it is suppose to but, I would like it to on working for each section not all of the classes and ACF slots.
jQuery(document).ready(function(){
// Hide displayed
jQuery(".cp-image-with-slideout__panel-learn-more-button").click(function(){
jQuery(".additional-content, .close-bio").show();
jQuery(".cp-image-with-slideout__panel-learn-more-button, .short-contend").hide();
});
// Show hidden
jQuery(".close-bio").click(function(){
jQuery(".additional-content").hide();
jQuery(".close-bio").hide();
jQuery(".cp-image-with-slideout__panel-learn-more-button, .short-contend").show();
});
});
2
Answers
I was able to add this in and it worked:
The problem you’re having is that your jQuery is too generalised. If you click any button with close-bio as a class, then find all .additional-content elements and hide them. You now need to look at ways of making those events specific to the relevant elements for each button.
There’s a number of different ways you can achieve this. I would probably loop through each .staff-member-holder and then create the events. Something like:
We’re now looping through each .staff-member-holder element and looking for each .close-bio in that element, and when that button is clicked looking for .additional-content and .close-bio and hiding them, and looking for the .learn-more-button and .short-contend and showing them.