前提・実現したいこと
タイトルの通りとなりますが、複数カラムを持つテーブルの行を、アコーディオンによって表示/表示させる方法を探しております。
下記のサイトにより、基本的に1つのカラムを持つ行のアコーディオンによる表示/非表示させる方法は分かりました。
リンク内容
発生している問題・エラーメッセージ
ただ、私が実現したいのは下記のような「複数のカラムを持つテーブル」で、同様にアコーディオンによる表示/表示のやり方となります。 イメージ図は、下記の感じです: ![アコーディオンテーブル](569da948fcbaabc41682f9bcc2ce23a4.png)
該当のソースコード
HTML
1上記サイトからの引用で、下記のように解説があります: 2 <tr> 3 <td colspan="2" class="p-0"> 4 @* <td>の下に<div>要素を作成し「collapse」クラスを付ける *@ 5 <div id="employeeList1" class="collapse"> 6 <div class="px-4 py-2">山田太郎</div> 7 <div class="px-4 py-2">田中花子</div> 8 <div class="px-4 py-2">前田一郎</div> 9 </div> 10 </td> 11 </tr> 12 13この状態では「<td></td>」が1つだけなので、イメージ図に示したような複数のカラム、つまり複数の「<td></td>」に対応できないのでは、と考えてしまいます。
試したこと
試したいのですが、そもそも複数の「<td></td>」に対応したやり方を見出せないため、まだ先に進めない状況です。
ご存じの方がいらっしゃったら、ご教示願えませんでしょうか。
Bootstrap単体では難しく、jQueryなどを利用する必要があるのであれば、それでも問題ありません。
補足情報(FW/ツールのバージョンなど)
Bootstrap 4.4.1
jQuery 3.4.1
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/09/30 05:06
2021/09/30 05:12