daniel-w
4/10/2015 - 8:13 PM

Uniform content height with option to expand as on click.

Uniform content height with option to expand as on click.

<?php
      // WP_Query arguments

      $id = get_field('performer-category');

      $args = array (
      	'post_type'              => 'performer',
      	'cat'                    => $id,
      );

      // The Query
      $query = new WP_Query( $args );

      // The Loop
      if ( $query->have_posts() ) { while ( $query->have_posts() ) { $query->the_post(); ?>
          <div class="col-sm-4 performer">
            <?php the_post_thumbnail('large'); ?>
            <?php the_title('<h3>', '</h3>'); ?>
            <?php
              $content = get_the_content();
              $content = substr_replace($content, '<span class="read-more">... <i class="fa fa-plus-square"></i><br/></span>', 120, 0);
              echo '<p>' . $content . ' <span class="read-less"><i class="fa fa-minus-square"></i></span></p>';
             ?>
            <?php if (get_field('performer-website')) {
              echo '<a href="'. get_field('performer-website') .'"><button class="performer-button">Visit Website</button></a>';
            } ?>
          </div>
  <?php }
      } else {
      	// no posts found
      }

      // Restore original Post Data
      wp_reset_postdata();
      ?>
  /**
   * Expand and close performers bios
   */
   jQuery('.read-more').click(function(){
     jQuery('.performer').removeAttr( "style" );
     jQuery('.read-more').show();
     jQuery(this).hide();
     jQuery(this).parents('.performer').css('height', 'auto');
   });

   jQuery('.read-less').click(function(){
     jQuery('.performer').removeAttr( "style" );
     jQuery('.read-more').show();
   });
.performer {
  height: 345px;
  overflow: hidden;
  padding: 0 10px;
  margin: 20px 5px;
  border-bottom: solid 3px #dedede;
}