JavaScriptを使用して 複数階層のタブメニューのコンテンツ表示

Question

解決したいこと

クリックしたボタンに該当するコンテンツ（内容）を表示させたい。

例）
Ruby on Railsでサロン予約ができるWebアプリをつくっています。
記事を投稿する機能の実装中に狙っている表示ができずかなり時間が経過しております。
解決方法を教えて下さい。

発生している問題

https://gyazo.com/27d110281873abf33a73ca8178de638d

上記動画のように、第２階層のメニューをクリックした際に、コンソール内に記述してあるPタグの内容を実際のビューでも
表示させ、それぞれのメニューにある出しわけを行いたい。

該当するソースコード

<div id="js-tab">
<ul class="tab-menu" >
  <li class="tab-menu__item"><span class="tab-trigger js-tab-trigger is-active" data-id="tab01">予約管理</span>
    <ul class="tab-menu-detail" id="tab01">
        <li class="second-menu js-tab-target " data-menu="1" unko-id="10">スケジュール確認</li>
        <li class="second-menu js-tab-target " data-menu="2">定休日選択</li>
    </ul>
  </li>

  <li class="tab-menu__item"><span class="tab-trigger js-tab-trigger" data-id="tab02">メニュー作成</span>
    <ul class="tab-menu-detail" id="tab02">
        <li class="second-menu js-tab-target is-active" data-menu="3">新規メニュー作成</li>
        <li class="second-menu js-tab-target " data-menu="4">既存メニュー編集・削除</li>
    </ul>
  </li>

  <li class="tab-menu__item"><span class="tab-trigger js-tab-trigger" data-id="tab03">クーポン作成</span>
    <ul class="tab-menu-detail" id="tab03">
        <li class="second-menu js-tab-target " data-menu="5">新規クーポン作成</li>
        <li class="second-menu js-tab-target " data-menu="6">既存クーポン編集・削除</li>
    </ul>
  </li>

  <li class="tab-menu__item"><span class="tab-trigger js-tab-trigger" data-id="tab04">レビュー確認</span>
    <ul class="tab-menu-detail" id="tab04">
        <li class="second-menu js-tab-target " data-menu="7">現在のレビュー</li>
        <li class="second-menu js-tab-target " data-menu="8">コメント返信</li>
    </ul>
  </li>
</ul>
<!-- .tab-menu -->

<!-- .2段目めにゅ -->


<!-- .メニュー内容 -->
<div class="tab-content">
  <div class="tab-content__item js-tab-target " unko-menu="1" >
    <p class="tab-content__item" >スケジュール確認のコンテンツが入ります。。スケジュール確認のコンテンツが入ります。。スケジュール確認のコンテンツが入ります。。スケジュール確認のコンテンツが入ります。。スケジュール確認のコンテンツが入ります。。</p>
  </div><!-- .tab-content__item -->
  <div class="tab-content__item js-tab-target" id="tab02">
    <p>定休日選択のコンテンツが入ります。定休日選択のコンテンツが入ります。定休日選択のコンテンツが入ります。定休日選択のコンテンツが入ります。定休日選択のコンテンツが入ります。定休日選択のコンテンツが入ります。</p>
  </div><!-- .tab-content__item -->
  <div class="tab-content__item js-tab-target" id="tab03">
    <p>タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。</p>
  </div><!-- .tab-content__item -->
  <div class="tab-content__item js-tab-target" id="tab04">
    <p>タブ4のコンテンツが入ります。タブ4のコンテンツが入ります。タブ4のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。タブ3のコンテンツが入ります。</p>
  </div><!-- .tab-content__item -->
</div><!-- .tab-content -->
<%# /Footer前 %>
</div>

例）

.tab-menu-detail{
  display: none;
}

.tab-menu-detail.is-active {
  display: flex;
}

.second-menu {
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 6px;
    border: 2px solid dimgray;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    background-color: lightslategrey;
    position: relative;
    
}

/* タブコンテンツ */
.tab-content {
  border: 1px solid #ccc;

}
.tab-content__item {
  box-sizing: border-box;
  padding: 20px;
  display: none;
  text-align: left;
}

.tab-content__item:active {
  display:flex;
}

(()=>{

window.addEventListener('load', () => {
  const tabMenu = document.getElementById("js-tab")
  const menuDetail = tabMenu.querySelectorAll("[data-id]")
  const menuMoreDetail = tabMenu.querySelectorAll("[data-menu]")
  const tabMenuDetails = tabMenu.querySelectorAll(".tab-menu-detail");
  for(let i = 0; i < menuDetail.length; i++) {
    //タブメニュークリック時
    
    menuDetail[i].addEventListener('click', (e) => {
      const init = () => {
        menuMoreDetail[i].style.display = 'block';
        console.log(menuMoreDetail)
      };
      init();

      //クリックされた要素（メニュー要素）を取得
      let currentMenu = e.currentTarget;
      //ターゲットとなる要素（タブメニューdata属性ちと等しいid値を持つコンテンツ要素を取得
      let currentContent = document.getElementById(currentMenu.dataset.id);
      console.log(currentContent)

      // すべてのタブメニューの'is-active'クラスを削除
      for(let i = 0; i < menuDetail.length; i++) {
        menuDetail[i].classList.remove('is-active');
      }
      // クリックしたタブメニューに'is-active'クラスを追加
      currentMenu.classList.add('is-active');

      //クリックされた時に is-active を追加/削除
      for (const tabMenuDetail of tabMenuDetails) {
        console.log(tabMenuDetail)
        if (tabMenuDetail.id === currentMenu.dataset.id) {
         tabMenuDetail.classList.add('is-active');
        } else {
         tabMenuDetail.classList.remove('is-active');
        }
      }
       // タブコンテンツを非アクティブにする
       //for(let i = 0; i < menuMoreDetail.length; i++) {
        // menuMoreDetail[i].classList.remove('is-active');
       
       // 対象コンテンツ(指定したIDの要素があったら)を表示させる
      // if(currentContent !== null) {
       //  currentContent.classList.add('is-active');
      // } else {
      //   currentContent.classList.remove('is-active');
      // }


      //ここから
      const menuDetailSub = tabMenu.querySelectorAll("[unko-id]")
      const menuMoreDetailSub = tabMenu.querySelectorAll("[unko-menu]")
      const tabMenuDetailsSub = tabMenu.querySelectorAll(".tab-content__item");

      for(let i = 0; i < menuDetailSub.length; i++) {
      menuDetailSub[i].addEventListener('click', (e) =>{
        const taketakeshi = () =>{
          menuMoreDetail[i].style.display = 'block';
          console.log(menuDetailSub)
        };
        taketakeshi();
       
        //クリックされた要素（メニュー要素）を取得
      let currentMenuSub = e.currentTarget;
      //ターゲットとなる要素（タブメニューdata属性ちと等しいid値を持つコンテンツ要素を取得
      let currentContentSub = document.getElementById(currentMenuSub.dataset.id);
      console.log(currentContentSub)

        // すべてのタブメニューの'is-active'クラスを削除
      for(let i = 0; i < menuDetailSub.length; i++) {
        menuDetailSub[i].classList.remove('is-active');
      }
      // クリックしたタブメニューに'is-active'クラスを追加
      currentMenu.classList.add('is-active');

      //クリックされた時に is-active を追加/削除
      for (const tabMenuDetailSub of tabMenuDetailsSub) {
        console.log(tabMenuDetailSub)
        if (tabMenuDetailSub.id === currentMenuSub.dataset.id) {
         tabMenuDetailSub.classList.add('is-active');
        } else {
         tabMenuDetailSub.classList.remove('is-active');
        }
      }
      })}


       //ここまで
    })
  }

自分で試したこと

GIFでも確認できる通りですが、console.logで確認しながら作業を行なっており、
第２階層のメニューをクリックした時に表示させたいPタグの中身までは引っ張って来れている状態です。
あとは表示の問題でCSSのdisplayをnoneにするかしないかだと思い、思いつくパターンを試して見ましたが、
全くうまくいきませんでした。

Comments

[thyda.eiqau]

data-menuなのかunko-menuなのか、idなのかunko-menuなのか、めちゃくちゃですが、全体的に定義を見直して修正していただけますか。

[thyda.eiqau]

あと、CSSも、.tab-content__item:active は何を意図しているのか、ご自身で確認されたほうがよいと思います。

[RyoYamane]

いろんなものを参考にしてしまって、classなど整理せずに増やしていたらこんな状態になりました。
わかりにくいコードですいません。
また、ご指摘のとり記述している言葉の認識も甘いところがまだまだあります。
一度整理します！！ありがとうございます！

Answer 1

とりあえず、以下のように変更追加してみてはいかがでしょうか。

            const taketakeshi = () =>{
              //menuMoreDetail[i].style.display = 'block';　←変数名が間違っている
              menuMoreDetailSub[i].style.display = 'block';

.tab-content__item .tab-content__item {
  display: block; /* display: none を打ち消し */
}

Comments

[RyoYamane]

早急な回答ありがとうございます。
ご指摘の記述で挙動確認できました！
現在、要素を増やそうとすると、先に表示した要素がそのままで新しい要素がその下に表示されているので、
こちら実装できるように頑張ります！
今後とも何卒よろしくお願いいたします。

[Lhankor_Mhy]

お役に立てたようで何よりです。