jQuery handler to trigger upon window strict width and/or window resize if window width is less than a strict amount
<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>
