Masonry as Callback function

Masonry as Callback function

I have a basic toggle switch that shows the clicked on div while closing all other similar divs.

It also uses the Masonry plugin which works fine, organising the layout both horrizontally and then vertically when the page loads and when each div is clicked on. This bit works fine.

Currently it works simultaneously with the other calls and therefore rearranges the divs before the toggle/show/hide methods are complete. Can someone help me have it as a callback function so that it rearranges the items with the .masonry call AFTER all the animations are complete. 

  
  1. $(document).ready(function(){
  2. $('.threadWrapper > .littleme').click(function() {
  3. $(this).next().toggle('slow');
  4. $(this).toggle('slow');
  5. $('.littleme').not(this).next().hide('slow');
  6. $('.littleme').not(this).show('slow');
  7. // re-run masonry
  8. $('#mainContent').masonry();
  9. return false;
  10. }).next().hide();
  11. });

See how its currently working here: kalpaitch.com

Andrew