0

実現したいこと

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
  • 1
    できるだけ質問が自己完結するように、コードは外部サイトに掲載するのでなく、質問に直接記載して下さい。 現在のリンク先のコードは再現可能な短いサンプルコードの書き方に沿っていそうですし、そのままで良いと思います。 なお、このサイトにもCodePenのような機能の「JavaScript/HTML/CSSスニペット」が有り、編集エリアの上部のボタンで挿入できますが、使い方が解らない場合は、ただコードを貼り付けるので構いません。
    – mjy
    Commented 2023年9月5日 2:57

1 件の回答 1

0

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

現在のコードでは

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

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。