jQuery accordion for smartphones
<p>The idea is that this accordion works only on smartphones to improve usability on small devices. </p>

<p>However it only works when you refresh the browser under 480.</p>

<p>Is there a way of including in the function something that makes the browser refresh as soon as the window is resized under 480?</p>

<p>Refreshing the browser manually would not make it usable at all.</p>

<pre><code>var windowWidth = $(window).width(); //retrieve current window width
function accordion() {
if (windowWidth&lt;=480)
{


$('h3').click(function() {

    $('h3').next().hide(2000);

    if($(this).next().is(':hidden') == true) {

          $(this).next().show(1000); } 


                         });

                    }}

$(document).ready(function() {
 accordion();
 });
</code></pre>

<p>HTML markup</p>

<p></p>

<pre><code>                    &lt;section class="box"&gt;

                        &lt;h3&gt;Service 1&lt;/h3&gt;

                       &lt;div class="box2"&gt; &lt;p&gt;&lt;/p&gt;&lt;/div&gt;

                    &lt;/section&gt;&lt;!-- end box_1 --&gt; 

                    &lt;section class="box"&gt;

                        &lt;h3&gt;Service 2&lt;/h3&gt;

                        &lt;div class="box2"&gt;&lt;p&gt;&lt;/p&gt;   &lt;/div&gt;                     

                    &lt;/section&gt;&lt;!-- end box_2 --&gt; 

                    &lt;section class="box"&gt;

                        &lt;h3&gt;Service 3&lt;/h3&gt;

                        &lt;div class="box2"&gt;&lt;p&gt;&lt;/p&gt;   &lt;/div&gt;                     

                    &lt;/section&gt;&lt;!-- end box_3 --&gt;  

                    &lt;/section&gt;
</code></pre>
