cssもしくはjsでハンバーガーメニュー内のカテゴリーをクリックすると、アコーディオンメニューのように表示する動きを指定したい

前提・実現したいこと

jsでハンバーガーメニュー表示を実装しています。
ハンバーガーメニュー内のメニューをクリックするとアコーディオンメニューのように新たにカテゴリーが表示されるようにcssで書いていますが、下にスライドして空間はできますが、文字が表示されません。

<現状>
ハンバーガーメニュー内のメニューをクリックすると隠れているメニューが下に出てくる動きです。
フルスクリーンで展開するアニメーションエフェクトになってます。
html,scss,jsで作成しております。

こちらの参考サイトをベースに作成
https://codepen.io/hexagoncircle/pen/OMJeja?__cf_chl_jschl_tk__=a38e1b3a995a265176ea7c3deaa5afe9c3f8e869-1591248961-0-AZg3eLbwpYUr10PQGQ4rdb8VZpWjn37IfqACqrjkQO51oBbJjHYoSJu2QWtMaLUdqJ7RUl9UpcZp6bE0syTqHerlgK-qu9ZJBQR2ovZ5J3mmX0HhEaGQrpVpDKn3exfTRQG5F-diwkDc7uWz5cuHo1HnsttgNiKaZDx_d6VK_O-qGN4VR487j5hs5HmBJKj3I2tXQlJXlUKbbE0kVIKx03pX4guBJRK-ChXE5Nl-AtqIqUap6xl74pQjDSbFfZx5oD5EpbbBq8a7_FQsp50LUYeVuGJ5rDdsszTB_7jj36gI8Ko4qS8Q14QDiJRYunSYzOKoRdlRSxAEda154DODz2qvHM7K1lL7ieyTNVF1PGnS

＜実現したい事＞
●メニューCをクリック（他メニューD,メニューF）すると、下に隠れているメニューを表示させるようにしたい
●メニュー内を縦スクロールにしたい

発生している問題・エラーメッセージ

●メニューCをクリックして下に隠れているメニューを表示
途中まではできましたが、メニューCが中央寄せにならない。しかし、クリックすると中央寄せになる。
また、メニューCをクリックすると、隠れているメニューの文字は表示されないが、空間はできる

該当のソースコード

<!--ナビSP-->
  <button class="menu-toggle"></button>
    <nav>
      <ul class="menu Serif">
      <li data-text="Home"><a href="./">メニューA</a></li>
      <li data-text="About"><a href="#">メニューB</a></li>
          
			  
    <div class="accordion-wrap">
      <li data-text="Salon menu" class="accordion-header">
         <a href="#">メニューC<i class="fa fa-angle-down" aria-hidden="true"></i></a></li>
            <ul class="menu__second-level accordion-text">
                <li>メニューC-1</li>
                <li>メニューC-2</li>
                <li>メニューC-3</li>
            </ul>
     </div>			  
			  
    <div class="accordion-wrap">
      <li data-text="School" class="accordion-header">
         <a href="#">メニューD<i class="fa fa-angle-down" aria-hidden="true"></i></a></li>
            <ul class="menu__second-level accordion-text">
                <li>メニューD-1</li>
                <li>メニューD-2</li>
                <li>メニューD-3</li>
            </ul>
     </div>	

　　　　<li data-text="Campeign"><a href="campeign/index.html">メニューE</a></li>

　　　<div class="accordion-wrap">
      <li data-text="School" class="accordion-header">
         <a href="#">メニューF<i class="fa fa-angle-down" aria-hidden="true"></i></a></li>
            <ul class="menu__second-level accordion-text">
                <li>メニューF-1</li>
                <li>メニューF-2</li>
                <li>メニューF-3</li>
            </ul>
     </div>	
  </ul>
 </nav>


<!--scss-->
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%; 
}
button {
/*  opacity: 0.6;*/
  background-color: transparent;
  position: fixed;
  z-index: 2;
  top: 35px;
  right: 30px;
  border: none;
  width: 36px;
  height: 30px;
  outline: none;
  transition: opacity 0.2s ease-out; 
}
@media only screen and (max-width: 425px){
button {
  top: 14px;
}
}
button:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    right: auto;
    width: 100%;
    background: linear-gradient(to bottom, #c5a368, #c5a368 20%, transparent 20%, transparent 40%, #c5a368 40%, #c5a368 60%, transparent 60%, transparent 80%, #c5a368 80%, #c5a368 100%);
/*    background: linear-gradient(to bottom, #98B296, #98B296 20%, transparent 20%, transparent 40%, #98B296 40%, #98B296 60%, transparent 60%, transparent 80%, #98B296 80%, #98B296 100%);*/
    transition: opacity 0.2s ease-out, width 0.2s 0.2s ease-out; 
}
  button:after {
    opacity: 0;
    content: '×';
    color: white;
    position: absolute;
    top: 16px;
    left: -4px;
    font-family: Arial, sans-serif;
    font-size: 76px;
    line-height: 0;
    transition: opacity 0.4s ease-out; 
}
  button:active {
    transform: translateY(2px); 
}
  button:hover {
    opacity: 1; 
}
  .open button {
    opacity: 1; 
}
    .open button:before {
      opacity: 0;
      width: 0; 
}
    .open button:after {
      opacity: 1;
      transform: translate3d(0, 0, 0) rotate(360deg);
      transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out; 
}


/*下層*/
button.menu-toggle-kaso {
  background-color: transparent;
  position: fixed;
  z-index: 2;
  top: 30px;
  right: 30px;
  border: none;
  width: 36px;
  height: 30px;
  outline: none;
  transition: opacity 0.2s ease-out; 
}
@media only screen and (max-width: 991px){
button.menu-toggle-kaso {
  top: 22px;
}
}
@media only screen and (max-width: 425px){
button.menu-toggle-kaso {
  top: 20px;
}
}

button.menu-toggle-kaso:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    right: auto;
    width: 100%;
    background: linear-gradient(to bottom, #000000, #000000 20%, transparent 20%, transparent 40%, #000000 40%, #000000 60%, transparent 60%, transparent 80%, #000000 80%, #000000 100%);
    transition: opacity 0.2s 
	ease-out, width 0.2s 0.2s ease-out; 
}
  button:after {
    opacity: 0;
    content: '×';
    color: white;
    position: absolute;
    top: 16px;
    left: -4px;
    font-family: Arial, sans-serif;
    font-size: 76px;
    line-height: 0;
    transition: opacity 0.4s ease-out; 
}
  button:active {
    transform: translateY(2px); 
}
  button:hover {
    opacity: 1; 
}
  .open button {
    opacity: 1; 
}
    .open button:before {
      opacity: 0;
      width: 0; 
}
    .open button:after {
      opacity: 1;
      transform: translate3d(0, 0, 0) rotate(360deg);
      transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out; 
}




nav {
  z-index: 1;
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  overflow: hidden; 
}
  nav:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: rgb(197, 163, 104, 0.98);
/*    background: rgba(123, 156, 121, 0.98);*/
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 100%;
    transform: scale(0.04), translateY(9999px);
    overflow: hidden; 
}
  .open nav {
    top: 0; 
}
    .open nav:before {
      animation: menu-animation 0.8s ease-out forwards; 
}

ul.menu {
  position: fixed;
  top: 25%;
  left: 48%;
  transform: translate3d(-50%, -50%, 0);
  backface-visibility: hidden;
  perspective: 1000;
  color: white; 
}
  ul.menu li {
    opacity: 0;
    text-align: center;
    transform: translate3d(0, 36px, 0); 
}
    ul.menu li:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      left: auto;
      background-color: white;
      height: 100%;
      width: 0;
      overflow: hidden;
      transition: width 0.14s ease-out; 
}
    ul.menu li:after {
      opacity: 0;
      content: attr(data-text);
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      color: #c5a368;
/*      color: #98B296;*/
      overflow: hidden;
      transform: translate(-24px, 6px);
      transition: transform 0.1s ease-out, opacity 0.1s ease-out; }
    ul.menu li:hover:before {
      left: 0;
      right: auto;
      width: 100%; }
    ul.menu li:hover:after {
      opacity: 1;
      padding: 0 20px;
      transform: translate(0px, 6px);
      transition: transform 0.2s 0.14s ease-out, opacity 0.2s 0.14s ease-out; }
    .open ul.menu li {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition: transform 0.2s ease-out, opacity 0.2s ease-out; }

/*クリックしてから、順番に出てくる 数字を入力する事*/
      .open ul.menu li:nth-child(1) {
        transition-delay: 0.75s; }
      .open ul.menu li:nth-child(2) {
        transition-delay: 0.85s; }
      .open ul.menu li:nth-child(3) {
        transition-delay: 0.95s; }
      .open ul.menu li:nth-child(4) {
        transition-delay: 1.05s; }
      .open ul.menu li:nth-child(5) {
        transition-delay: 1.15s; }
      .open ul.menu li:nth-child(6) {
        transition-delay: 1.25s; }
article {
  padding: 24px;
  max-width: 600px;
  margin: 60px auto;
  transition: 0.2s ease-out;
}
  .open article {
    transform: scale(0.92);
    transition: transform 0.2s 0.41s ease-out; 
}

@keyframes menu-animation {
  0% {
    opacity: 0;
    transform: scale(0.04) translateY(300%); }
  40% {
    transform: scale(0.04) translateY(0);
    transition: ease-out; }
  40% {
    transform: scale(0.04) translateY(0); }
  60% {
    opacity: 1;
    transform: scale(0.02) translateY(0px); }
  61% {
    transform: scale(0.04); }
  99.9% {
    height: 0;
    padding-bottom: 100%;
    border-radius: 100%; }
  100% {
    transform: scale(2);
    height: 100%;
    padding-bottom: 0;
    border-radius: 0; } }
/* Scss Document */




<script>	
$('button').on('click', function(){
  $('body').toggleClass('open');
});
</script>