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