Question

I am using the jQuery Isotope plugin for WordPress posts. I want to show just the post excerpt on page load, then show the entire post on click by simply expanding the height of the div. However, the Isotope plugin calculates the div height before the user clicks the “Read More” button to expand the page, so the new height breaks the plugin.

I am playing around with the reLayout method but haven’t figured it out… any ideas?

Here’s a working link. Try the “Strawberries” post. http://ashlinixon.com/new-test/index.html

Also, code samples:

HTML:

<article class="item">
    <div class="featured-img"><img src="images/strawberries.jpg" alt="Strawberries" /></div>
    <h2>Strawberries</h2>
    <p class="excerpt">Lorem ipsum dolor sit amet</p>
    <p class="read-more">Read more</p>
    <div class="post">
        test test<br />test test<br />test test
    </div>
</article>

jQuery:

$(document).ready(function(){
    $(".post").hide();
    $(".excerpt").show();

    $('.read-more').click(function(){
        $(".post").slideToggle();
        $("#portfolio").isotope( 'reLayout' );
    });            
});

THANKS! 🙂

Answer 1

If I use toggle instead of slideToggle seems to work fine. Good enough for me right now. 🙂

$(document).ready(function(){
  $(".post").hide();
  $(".excerpt").show();

  $('.read-more').click(function(){
      $(".post").toggle();
      $("#portfolio").isotope( 'reLayout' );
  });              
});