お疲れ様です。
ちょっと以前思いついたテクニックを。

https://revenue-test.biz/test_html/window4.html

（上記URLをブラウザでご確認ください。）

添付ファイルをブラウザで開いてみればわかると思いますが、
マウスオーバーで4つのBOXが開いたり閉じたりします。

これ、Javascript無使用で、CSSのみで作った動きだったりします。

むずかしいテクニックではなくて、マウスオーバー時とそうでないときにBOXの幅を変更しているだけで、
あとは transition でその間をアニメーションで見せるという単純な手法です。

CSSのみで軽いので、使えるところがありましたらお使いください。m(_ _)m