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}