Как сделать так, чтобы при нажатии на кнопку header плавно скрывался/показывался?

Вот на таком примере
https://jsbin.com/riroxuyazu/1/edit?html,css,output
Как сделать так, чтобы при нажатии на кнопку "show/hide" header плавно скрывался/показывался (типа move up и move down с fade in и с fade out соотвественно) и на его место плавно пододвигался контент ниже? Спасибо