Jquery: Perform an event according to browser size
<p>On my website, I want paragraphs to be turned into an accordion menu when the browser view port size becomes less than 480px.</p>

<p>This is the code I am using to achieve that:</p>

<pre><code>$(document).ready(function(){
    var pageWidth = $(window).width();  
    if ( pageWidth &lt;= 480 ) {

$('.data &gt; h3').addClass('jqlink');
$('.data ').addClass('jqbg');
$('.data&gt;h3').append('&lt;p&gt;[+]&lt;/p&gt;');
   $('.data &gt; p').hide();   //hide the event 

   $('.data &gt; h3').click(function(){   //clicked on the title
       if($(this).next().is(':visible')){      //is this question already visible?
        $(this).next().hide('fast');           //hide it (toggle)
       }else{   
        $('.data &gt; p:visible').hide('fast');    //otherwise, hide whatever is currently visible
        $(this).next().show('fast');                    //show the question we clicked on
       }
   });

 } });
</code></pre>

<p>It works brilliantly, except it only triggers when the browser first loads.
If the browser is re-sized after loading, then the code wont work.</p>

<p>I know of the <a href="http://api.jquery.com/resize/" rel="nofollow">.resize()</a> command. However, that only seems to work if the browser is resized. If the browser is less than 480px when it first loads, then the code will only trigger if the user resizes the browser.</p>

<p>How can I get the code to work both on resize and on browser load?</p>
