javascript expand/collapse button

Question

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)

$(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));
    }
  
  });
});

#wrapper {
  background: #ccc;
  overflow: hidden;
  transition: height 200ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Toggle Expand/Collapse</button>
<div id="wrapper" class="open">
  <ul id="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

Answer 1

Option 1: Simplified Code

You can actually simplify a fair amount by relying on CSS to define the show/hide style, and transitioning on max-height, you then simply toggle the addition of e.g. an open class to allow the height of the content to expand.

This also maintains strict separation of concerns, keeping functionality withiin Javascript and styling within CSS.

$(function() {
  var b = $("#button");
  var w = $("#wrapper");
  var l = $("#list");
  b.click(function() {
    w.toggleClass('open'); /* <-- toggle the application of the open class on click */
  });
});

#wrapper {
  background: #ccc;
  overflow: hidden;
  transition: max-height 300ms;
  max-height: 0; /* <---hide by default */
}
#wrapper.open {
  max-height: 100px; /* <---when open, allow content to expand to take up as much height as it needs, up to e.g. 100px */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Toggle Expand/Collapse</button>
<div id="wrapper">
  <ul id="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

Option 2: Revised Code

Alternatively, if you wish to use your existing code, you need to change it so the default state is hidden. Do this by setting the height to zero in your CSS, removing the open class from your HTML and removing the initial height setting from your Javascript:

$(function() {
  var b = $("#button");
  var w = $("#wrapper");
  var l = $("#list");

  // w.height(l.outerHeight(true)); REMOVE THIS 

  b.click(function() {

    if (w.hasClass('open')) {
      w.removeClass('open');
      w.height(0);
    } else {
      w.addClass('open');
      w.height(l.outerHeight(true));
    }

  });
});

#wrapper {
  background: #ccc;
  overflow: hidden;
  transition: height 200ms;
  height: 0; /* <-- set this */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Toggle Expand/Collapse</button>
<!-- <div id="wrapper" class="open"> REMOVE THIS  -->
<div id="wrapper">
  <ul id="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

Answer 2

you can use jquery .toggle() method

<button id="button">Toggle Expand/Collapse</button>
<div id="wrapper" class="open">
  <ul id="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>  


$('#button').click(function(){
    $('#wrapper').toggle();
});  

DEMO

updated
you can add the following .css

#wrapper {
  background: #ccc;
  display:none
}  

DEMO