// source http://jsbin.com

index.html

<style id="jsbin-css">
.demo-wrapper {
  top: 0px;
  position: fixed;
	min-height: 50px;
      width: 100%;
}

    
		.slider {
		  
			overflow-y: hidden;
			max-height: 0;

			-webkit-transition-property: all;
			-webkit-transition-duration: 1s;
			-webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

			-moz-transition-property: all;
			-moz-transition-duration: 1s;
			-moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

			-ms-transition-property: all;
			-ms-transition-duration: 1s;
			-ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

			transition-property: all;
			transition-duration: 1s;
			transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

			background: #383a40;
			height: 50px; 
			width: 100%;
		}

		.slider.closed {
			max-height: 50px;
		}
</style>
<meta name="description" content="Demo header">
<div class="demo-wrapper">
	
	
	<div style="height: 50px; width: 100%; border: 1px solid #ccc;">
		<div class="slider closed" id="slider">
		</div>
	</div>

	<button onclick="document.getElementById('slider').classList.toggle('closed');">Sobe</button>
	
	
</div>
<script id="jsbin-javascript">
setTimeout(function(){
  
  document.getElementById('slider').classList.toggle('closed')
  
}, 2000);
</script>
<script id="jsbin-source-html" type="text/html"><meta name="description" content="Demo header">
<div class="demo-wrapper">
	
	
	<div style="height: 50px; width: 100%; border: 1px solid #ccc;">
		<div class="slider closed" id="slider">
		</div>
	</div>

	<button onclick="document.getElementById('slider').classList.toggle('closed');">Sobe</button>
	
	
</div>

  
  
  </script>

jsbin.untitled.css

.demo-wrapper {
  top: 0px;
  position: fixed;
	min-height: 50px;
      width: 100%;
}

    
		.slider {
		  
			overflow-y: hidden;
			max-height: 0;

			-webkit-transition-property: all;
			-webkit-transition-duration: 1s;
			-webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

			-moz-transition-property: all;
			-moz-transition-duration: 1s;
			-moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

			-ms-transition-property: all;
			-ms-transition-duration: 1s;
			-ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

			transition-property: all;
			transition-duration: 1s;
			transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

			background: #383a40;
			height: 50px; 
			width: 100%;
		}

		.slider.closed {
			max-height: 50px;
		}

jsbin.untitled.js

setTimeout(function(){
  
  document.getElementById('slider').classList.toggle('closed')
  
}, 2000);