Imagine this as my example table:
<table>
<tr>
<td>a</td>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>b</td>
<td>three</td>
<td>four</td>
</tr>
<tr>
<td>c</td>
<td>five</td>
<td>six</td>
<table>
With the help of Javascript, I want to create a function that toggles the display: none property for rows below the clicked cell. However, this should only occur when clicking within the first cell of each row.
For instance, clicking on the cell with value a will hide the rows containing values b, three, and four, along with the rows containing values c, five, and six. Subsequent clicks on the same cell will toggle the display. Clicking on one or two cells will have no effect.
Keep in mind that the code will be applied to a significantly larger table.