I've been trying to create a collapsible table ,which has few rows which are visible all the time and few rows which expand on click.The expandable rows are supposed to have a single column of colspan 4 ,but this doesn't work and the row's only column restricts itself to colspan 1. Here's the code that I have used :
var coll = document.getElementsByClassName("breakrow");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}<table>
<tr class="breakrow">
<td>one</td>
<td>4324</td>
<td> <img src="green.png" style="width: 30.5%;height: 2.5%;"></td>
<td><img class="down" src="down.png" style="width: 5vh;height: 1.5%;"></td>
</tr>
<tr class="datarow" style="display: none;">
<td colspan="4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>
</tr>
</table>You can have a look at the problem : https://drive.google.com/drive/folders/1rd77LXNPc_Gd_cHfyL74oyga9H7y-qGO?usp=sharing Any fixes to my problem ?