title: Cannot implement dynamic height jQuery Wookmark
body: <p>I have some divs that have dynamic heights controlled by a 'click' function as below:</p>
  
  <pre><code>$('.expand').click(function() {
    $(this).next('.collapse').slideToggle();
  });
  </code></pre>
  
  <p>I am attempting to apply the <a href="https://github.com/GBKS/Wookmark-jQuery" rel="nofollow">jQuery wookmark plugin</a> to the divs, and it works, apart from when their heights are dynamically resized by expanding one of the sections. From the documentation, I copied over one of the examples to my code, and the dynamic height works</p>
  
  <pre><code>        $(document).ready(new function() {
            // Prepare layout options.
            var options = {
              autoResize: true, // This will auto-update the layout when the browser window is resized.
              container: $('#container'), // Optional, used for some extra CSS styling
              offset: 30, // Optional, the distance between grid items
              itemWidth: 300 // Optional, the width of a grid item
            };
  
            // Get a reference to your grid items.
            var handler = $('.outerwrapper');
  
            // Call the layout function.
            handler.wookmark(options);
  
            // Capture clicks on grid items.
            handler.click(function(){
              // Randomize the height of the clicked item.
              var newHeight = $('img', this).height() + Math.round(Math.random()*300+30);
              $(this).css('height', newHeight+'px');
  
              // Update the layout.
              handler.wookmark();
            });
          });
  </code></pre>
  
  <p>You can see this working <a href="http://jackdent.co.uk/vintage/" rel="nofollow">here</a>. How can I make it so that when you click one of the headings inside the divs, the layout updates, as it does in the example. Thanks in advance.</p>