on button click show collapse div jquery

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

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2<button id="button">Toggle Expand/Collapse</button>
3<div id="wrapper">
4  <ul id="list">
5    <li>Item</li>
6    <li>Item</li>
7    <li>Item</li>
8    <li>Item</li>
9  </ul>
10</div>

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