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

Question

[maratt]

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

Comments

[Сергей]

Например, так...

Для кнопки можно задать класс js-header-toggle

// юзаем jQuery

$('.js-header-toggle').on('click touch', function(){
  $('.header').toggleClass('.is-open');
});

Собственно классами убирать/добавлять нужные свойства...

.header{
 height: 0;
 opacity: 0;
 transition: height 0.3s;
}

.header.is-open{
 height: 100px;
 opacity: 1;
}

Думаю можно найти и лучше решения)

Answer 1

[Антон Усачев]

Вариаций много, вот одна из них: