実現したいこと
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つの表として表示できればいいのですが…)
※データについては固定
どのように改善していいか検討もつかず困っています... どうかよろしくお願いいたします。