javascriptでアコーディオンを作成しましたのでmemo #JavaScript

とりあえず、javascriptをのせます。

var slide = {
  get : document.getElementById("任意のid"),
  classA : document.querySelector("selecter"),

  play : function(){

    addClassA = slide.classA.classList;

    function clickEvent(){
      addClassA.toggle("side-open");
    }

    slide.get.addEventListener("click",clickEvent,false);

  },
}
slide.play()

cssです。

  .menu-list {
    transform: translate3d(0,-266vw,0);
    -webkit-transform: translate3d(0,-266vw,0);
    transition: all .8s;
    -webkit-transition: all .8s;
    opacity: 0;
  }

.side-open.menu-list,
.side-open.menu-list {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

ニュアンスでなんとなくわかるとおもいます。
動作自体は、GPUでうごかしましょう。
あとは、jsでつけて外してをやればokかと思います。

では、参考までに