skip to Main Content

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


  1. Chosen as BEST ANSWER

    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();
        });
        
    });
    

  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search