title: expand element on click with isotope
body: <p>Using Isotope to sort and filter some information. Need to initially display only the title of each list item, then expand it to show details on click. Each of these actions is technically working (isotope is sorting/filtering properly, clicking the title div is causing the details div to display), but they don't play nice. The absolute positioning applied by isotope is preventing the other list items from adjusting appropriately when any of the details divs are revealed.</p>
  
  <p>I've seen a few posts discussing re-adjusting the items on animation, but they all have a set height for the expanding element and in my case the heights will be based on content and not equal.</p>
  
  <p>EXAMPLE CODEPEN: <a href="http://codepen.io/stacybirdy/pen/emPwxj" rel="nofollow">http://codepen.io/stacybirdy/pen/emPwxj</a></p>
  
  <p>So when one of the items is clicked, everything below it should move down to accommodate the the extra content instead of having it expand behind the other items. Will this be possible?</p>
  
  <pre><code>$('.exp-head').click(function() {
    $(this).parent().find('.exp-body').slideToggle();
    $(this).toggleClass('open closed');
  });
  
  &lt;div class="exp-wrap composition chamber"&gt;
    &lt;div class="exp-head closed"&gt;Piece #1 (chamber)&lt;/div&gt;
    &lt;div class="exp-body"&gt;
      &lt;span class="duration"&gt;4' 50"&lt;/span&gt;
      &lt;span class="date"&gt;2014&lt;/span&gt;
      other information will go here
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>