title: hide an inner div if an outer div is resized smaller than 240px
body: <p>i am trying to hide an inner div (containing a sentence), when an outer div is resized with a toggle width button.</p>
  
  <p>e.g. outer div starts off at 300px wide, when a button is clicked it shrinks to 200px wide.</p>
  
  <p>If the outer div is resized to less than 240px (for example), then the inner div is hidden altogether. Then if button toggled, then inner dic reappears.</p>
  
  <p>Existing code here: <a href="http://jsfiddle.net/ZfHZV/509/" rel="nofollow">http://jsfiddle.net/ZfHZV/509/</a></p>
  
  <pre><code>$(document).ready( function(){
      $('#toggle-button').click( function() {
          var toggleWidth = $("#toggle").width() == 300 ? "200px" : "300px";
          $('#toggle').animate({ width: toggleWidth });
      });
  });
  </code></pre>
  
  <p>I just don't know how to make the inner div hide once the width gets less.</p>
  
  <p>Any help would be great. Thanks.</p>