I've been searching extensively online, but I haven't found a solution tailored to my specific situation. I have a Bootstrap table and I'm trying to implement a feature where clicking on a row will display additional information related to that row.
Despite my efforts, I can't seem to figure out how to make this work.
This is the code I currently have:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>When attempting this approach:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
<div class="additionl-info">
<p>Some additional info for the first row...</p>
</div>
</tr>
</tbody>
</table>The above attempt results in a broken table structure.
I am eager to learn how to successfully implement a functionality where clicking on any of the rows will reveal additional information relevant to that particular row.