title: collapse div on small screens, expand on large ones-javascript
body: <p>How can I make a simple script that will expand/shrink div based on screen size on load and screen resize? I'm new to java script here is my current code. Its a menu that on tablets and phones that is collapsed by default and click-able to expand its contents. But on desktops and laptops it is already expanded by default.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>if ( $(window).width() &gt; 600) {     
          $(function(){
    $('.header').click(function(){
      $(this).closest('.container').toggleClass('collapsed');
    });
  });
   //container is expanded on large screen resize or load
  }
  else {
  //container is collapsed on load or screen resize or load
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container{
    width:300px;
    background:#ccc;
    margin:10px;
    float:left;
  }
  
  .header{
    background:url('http://cdn1.iconfinder.com/data/icons/vaga/arrow_up.png') no-repeat;
    background-position:right 0px;
    cursor:pointer;
  }
  
  .collapsed .header{
    background-image:url('http://cdn2.iconfinder.com/data/icons/vaga/arrow_down.png');
  }
  
  .content{
    height:auto;
    min-height:100px;
    overflow:hidden;
    transition:all 0.3s linear;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -ms-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
  }
  .collapsed .content{
    min-height:0px;
    height:0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="header"&gt;Bla blah&lt;/div&gt;
    &lt;div class="content"&gt;
      &lt;p&gt; Some content here &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/AMzfe/1002/" rel="nofollow">http://jsfiddle.net/AMzfe/1002/</a></p>