layout / masonry - delayed layout adjustment - one

Question

Ok, so here is the problem https://jsfiddle.net/yq7f1a63/1/

Here is my code:

$(function () {
 $('.content').hide();
 $('a.read').click(function () {

     $(this).parent('.excerpt').hide();
     $(this).closest('li').find('.content').slideDown('fast');
     $('ul').masonry('layout');
     return false;
 });
 $('a.read-less').click(function () {

     $(this).parent('.content').slideUp('fast');
     $(this).closest('li').find('.excerpt').show();
     $('ul').masonry('layout');
     return false;       
 });
 });

 $('ul').masonry({
  itemSelector: 'li',
});

I have several masonry items with text inside. When clicking 'read more' it reveals more text (swaps .excerpt for .content).

I am using the layout method to adjust the grid when each item is clicked to reveal more, but for some reason it's one click behind. So for example I click read more on the first item and it goes wrong, but then I click read more for the next item and it adjusts to what the first item layout should have been, and so on!

Any ideas people?! Thanks in advance :-)

Answer 1

You need to adjust the grid after slideDown() or slideUp() finishes. So, add that code to their complete callback functions.

$(function () {
     $('.content').hide();
     $('a.read').click(function () {

         $(this).parent('.excerpt').hide();
         $(this).closest('li').find('.content').slideDown('fast',function(){
            $('ul').masonry('layout');
         });         
         return false;
     });
     $('a.read-less').click(function () {

         $(this).parent('.content').slideUp('fast',function(){
            $(this).closest('li').find('.excerpt').show();
            $('ul').masonry('layout');
         });         
         return false;       
     });
 });

 $('ul').masonry({
  itemSelector: 'li',
});

JSFiddle: https://jsfiddle.net/yq7f1a63/2/