title: Can I set jQuery's accordion depending on browser's window width?
body: <p>This script is working perfectly if I click Menu(h3), it does shrinks whole menu to minimum height.<br>
  Then I click again, it expands back to the original size.  </p>
  
  <p>Today, there are two kinds of viewer such as PC and Smart Phone.  </p>
  
  <p>I'd like to make this menu appear as the size of minimum as default when a viewer is seeing this page with smartphone, whose browser width is less than 400px.
  Minimum size means the size of the height when accordion is closed.<br>
  Is it possible?</p>
  
  <p><strong>javascript</strong></p>
  
  <pre><code>jQuery(document).ready( function() {
      $(".accordion dt").click(function(){
          $(this).next("dd").slideToggle();
          $(this).next("dd").siblings("dd").slideUp();
          $(this).toggleClass("open");   
      $(this).siblings("dt").removeClass("open");
  });
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="accordion"&gt;
      &lt;dt&gt;&lt;h3&gt;Menu&lt;/h3&gt;&lt;/dt&gt;
      &lt;dd&gt;
      Menu Contents
      &lt;/dd&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <pre><code>    if ((navigator.userAgent.indexOf('iPhone') &gt; 0 &amp;&amp; navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') &gt; 0 || navigator.userAgent.indexOf('Android') &gt; 0) {
          1. I want to show Menu as minimum size(Shrinked size)
      }else {
          2. I want to show Menu as maximum size(Expanded size)
      }
  </code></pre>