テーブルのアコーディオン表示について


### 実現したいこと

HTML、javascripyを使用してテーブルのアコーディオン表示を綺麗に表示したい

### 試したこと

パターン1：同じテーブル内にdetailの情報を追加  
<https://codepen.io/st410gaku/pen/xxmEeRB>  
パターン2：trにtd,tableを追加し、detailの情報を追加  
<https://codepen.io/st410gaku/pen/JjwRzdO>  
※カテゴリ1,カテゴリ2を押下するとdetail情報が表示されます。

### 困っていること

  * 可能であればパターン1の方法でアコーディオン表示をしたいのですが、  
『カテゴリ1』押下した際detailのカテゴリ1-1,カテゴリ1-2,カテゴリ1-3の全てを表示する方法がわからない  
（現在のところ、カテゴリ1-1のみ非表示が解除できる状態）

  * 調べてパターン2の方法を試してみましたが、detailの1-1,1-2,1-3は表示できますが、  
今度はdetailのテーブルを入れているtr>tdが見えて綺麗に表示できない  
（できればパターン1のように親と子のテーブルを1つの表として表示できればいいのですが…）

※データについては固定

どのように改善していいか検討もつかず困っています... どうかよろしくお願いいたします。




> 『カテゴリ1』押下した際detailのカテゴリ1-1,カテゴリ1-2,カテゴリ1-3の全てを表示する方法がわからない

現在のコードでは

[code]

    const classRow = button.parentElement.nextElementSibling;
    classRow.classList.toggle("accordion-content");
    
[/code]

このようにボタンの次の一行だけの表示状態を切り替えています。これを、「サブカテゴリが続く限り行の表示状態を切り替える」というコードに変更する必要があります。  
「サブカテゴリである」は「`.accordion-button`を含まない」で判定できるかと思います。

[code]

    let classRow = ...;
    while (classRow && !classRow.querySelector(".accordion-button")) {
      classRow.classList.toggle("accordion-content");
      classRow = classRow.nextElementSibling;
    }
    
[/code]




> 『カテゴリ1』押下した際detailのカテゴリ1-1,カテゴリ1-2,カテゴリ1-3の全てを表示する方法がわからない

現在のコードでは

[code]

    const classRow = button.parentElement.nextElementSibling;
    classRow.classList.toggle("accordion-content");
    
[/code]

このようにボタンの次の一行だけの表示状態を切り替えています。これを、「サブカテゴリが続く限り行の表示状態を切り替える」というコードに変更する必要があります。  
「サブカテゴリである」は「`.accordion-button`を含まない」で判定できるかと思います。

[code]

    let classRow = ...;
    while (classRow && !classRow.querySelector(".accordion-button")) {
      classRow.classList.toggle("accordion-content");
      classRow = classRow.nextElementSibling;
    }
    
[/code]

