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 >
<div >
<div >
<div >
<a >x</a>
<h2><?php the_sub_field( 'name' ); ?></h2>
<h3><?php the_sub_field( 'position' ); ?></h3>
<div >
<p><?php $value = wp_trim_words(get_sub_field('bio'), 274);
echo $value; ?></p>
</div>
<div >
<?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 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 >
View Profile </a>
</div>
</div>
</div>
<div >
<?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 >
<div >
<div >
<a >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 >
<div >
<h2><?php the_sub_field( 'name' ); ?></h2>
<h3><?php the_sub_field( 'position' ); ?></h3>
<div >
<?php the_sub_field( 'bio' ); ?>
</div>
<div >
<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 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 >
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();
});
});
CodePudding user response：
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:
jQuery('.staff-member-holder').each( function () {
var staffMember = jQuery(this);
staffMember.find('.close-bio').click( function () {
staffMember.find('.additional-content').hide();
staffMember.find('.close-bio').hide();
staffMember.find('.cp-image-with-slideout__panel-learn-more-button, .short-contend').show();
});
};
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.
CodePudding user response：
I was able to add this in and it worked:
jQuery(document).ready(function(){
// Hide displayed
jQuery(".cp-image-with-slideout__panel-learn-more-button").click(function(){
var staffContent = jQuery(this).closest('.staff-member-cover');
jQuery(staffContent).find(".additional-content").show();
jQuery(staffContent).find(".close-bio").show();
jQuery(staffContent).find(".cp-image-with-slideout__panel-learn-more-button, .short-contend").hide();
});
// Show hidden
jQuery(".close-bio").click(function(){
var staffContent = jQuery(this).closest('.staff-member-cover');
jQuery(staffContent).find(".additional-content").hide();
jQuery(staffContent).find(".close-bio").hide();
jQuery(staffContent).find(".cp-image-with-slideout__panel-learn-more-button, .short-contend").show();
});
});