title: javascript expand/collapse button
body: <p>I'm trying to create a toggle content button that loads with the content already hidden.
  This is the code I'm using but I'm not sure how to make the content appear as hidden (making the toggle button function more used for expanding content)</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>$(function() {
    var b = $("#button");
    var w = $("#wrapper");
    var l = $("#list");
    
    w.height(l.outerHeight(true));
  
    b.click(function() {
    
      if(w.hasClass('open')) {
        w.removeClass('open');
        w.height(0);
      } else {
        w.addClass('open');
        w.height(l.outerHeight(true));
      }
    
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper {
    background: #ccc;
    overflow: hidden;
    transition: height 200ms;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button id="button"&gt;Toggle Expand/Collapse&lt;/button&gt;
  &lt;div id="wrapper" class="open"&gt;
    &lt;ul id="list"&gt;
      &lt;li&gt;Item&lt;/li&gt;
      &lt;li&gt;Item&lt;/li&gt;
      &lt;li&gt;Item&lt;/li&gt;
      &lt;li&gt;Item&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>