Как сделать последовательную анимацию?

Question

[webe]

https://jsfiddle.net/f1u5j9eq/1/

Подскажите плиз
Анимация отрабатывает последовательно, первый блок уменьшается, далее раскрывается второй блок.
но как сделать так, что бы по второму нажатию на кнопку, второй блок скрылся и раскрылся первый.

т.е. все те же дейсвтия, но зеркально.

Answer 1

[strelok011]

Например используйте @keyframes.
По событиям меняете классы на оба компонента, а к классам привязывайте последовательную анимацию.
https://idg.net.ua/blog/uchebnik-css/ispolzovanie-...

Answer 2

[Варлам Ерофеич]

Ваши устремления похожи на "Горизонтальный аккордеон":

Источник указан в песочнице...