title: jQuery handler to trigger upon window strict width and/or window resize if window width is less than a strict amount
body: <p>Sorry for the elongated title, Im looking for your help in solving an issue that's driving me mad slowly.</p>
  
  <p>I am trying to find a way in which I can run a function under certain circumstances. Those circumstances are the following:</p>
  
  <ul>
  <li>function will trigger if the window width is equal to or less than a specific value (496) upon page load</li>
  <li>function will run if the window is resized down to the above value or less than</li>
  <li>function wont run if window width is greater than above value on page load or window resize</li>
  </ul>
  
  <p>If that has confused any of you I apologise, here is the code I have thus far to help explain it further.</p>
  
  <p>jQuery:</p>
  
  <pre><code>if($(window).width() &lt; 496 || ($(window).resize() &amp;&amp; $(window).width() &lt; 496)) {
      add_cta_arrows_for_mobile();
  }
  
  function add_cta_arrows_for_mobile() {
      $("#hori_ctas h4").addClass('arrow-down');
  
      $("#hori_ctas h4").click(function() {
  
          if($(this).attr('data-state') == 'dropped') {
              $(this).removeAttr('data-state').removeClass('arrow-up').addClass('arrow-down');
          } else {
              $(this).attr('data-state','dropped').removeClass('arrow-down').addClass('arrow-up');
          }
          $(this).next().children('div').slideToggle(800);
      });
  }
  </code></pre>
  
  <p>I have not included the html or CSS as I don't feel there is a need, as this is just function over design.</p>
  
  <p>Thank you in advance to anyone who takes the time to help.</p>