title: jQuery media queries: Conditional function on certain device width (working on resize as well)
body: <p>I have a fluid grid layout. I need some of the columns (less necessary - like Twitter updates) to be "HIDDEN" on smaller resolutions and "SHOWN" on click to its heading.</p>
  
  <p>Here's what I have so far:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  
      &lt;div class="toggle"&gt;
           &lt;h2&gt;Heading&lt;/h2&gt;
           This content is visible always
      &lt;/div&gt;
  
      &lt;div class="toggle-small"&gt;
           &lt;h2 class="toggle-small-heading"&gt;Heading&lt;/h2&gt;
           &lt;div class="toggle-small-content"&gt;
                This content is hidden on max-width 600px. You can reveal it by clicking the heading.
           &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="toggle-small"&gt;
           &lt;h2 class="toggle-small-heading"&gt;Heading&lt;/h2&gt;
           &lt;div class="toggle-small-content"&gt;
                This content is hidden on max-width 600px. You can reveal it by clicking the heading.
           &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>// D E F I N E   T H E   F U N C T I O N
  
  function ToggleSmall () {
       // CONDITIONALS
      // Clickable heading
      var ToggleSmallVar = $('#wrapper').find('.toggle-small-heading');
      // Content to toggle
      var ToggleSmallCol = $('#wrapper').find('.toggle-small-content');
      // FUNCTION
      // Content to toggle - hide it to be shown on click
      $(ToggleSmallCol).addClass('none');
      // Toggle function
      $(ToggleSmallVar).click(function () {
          // Find col to toggle
          var ToggleSmallColTarget = $(this).closest('.toggle-small-section').find('.toggle-small-col'); 
                      // Toggle the DIV
          $(ToggleSmallColTarget).slideToggle('slow');
      });
  }
  
  // C A L L   T H E   F U N C T I O N
  
  $(document).ready(function () {
  if ($(window).width() &lt; 681) {
      ToggleSmall();
  }
  });
  </code></pre>
  
  <p>It <strong>works</strong> on load, but I try to make it work "responsively" on window resize as well: Execute ToggleSmall() function on resolutions smaller than 681 and stop it on bigger ones.</p>
  
  <p>I tried to bind the function on "resize" event (e.g. <a href="https://stackoverflow.com/questions/14369944/jquery-behave-like-media-queries-when-resizing-browser">jQuery as Media Queries on resize</a>), but for some reason "the toggling" executes 3-4x times (document is "ready" multiple times?).</p>
  
  <p>I've found some other sollutions - mainly to define a variable - but none worked so far. I am also a jQuery novice, so maybe I missed something. :)  Any ideas?</p>