I have created a table in which whenever a user clicks the row it expands its next hidden row. to do that I have used the below script in which the next element of the class row-details is targeted as a hidden element. The issue here is to use an id or class to target each div inside the row.
If I use normal div elements then the script can use this.nextElementSibling; to identify the next div element which can be hidden and when the first div is clicked it will expand.
var tableRow = document.getElementsByClassName('row');
for (var i = 0; i < tableRow.length; i++) {
tableRow[i].addEventListener('click', function () {
var tableContent = document.querySelector('.row-details');
if (tableContent.style.maxHeight) {
tableContent.style.maxHeight = null;
} else {
tableContent.style.maxHeight = tableContent.scrollHeight + 'px';
}
});
}
In the below code there are 2 rows each with a hidden row containing details. I have used the same class for both hidden rows. What I am trying to achieve is to expand the hidden row without defining any Id or class. min-height property is not working on tr tags.
var tableRow = document.getElementsByClassName('row');
for (var i = 0; i < tableRow.length; i++) {
tableRow[i].addEventListener('click', function () {
var tableContent = this.nextElementSibling;
if (tableContent.style.maxHeight) {
tableContent.style.maxHeight = null;
} else {
tableContent.style.maxHeight = tableContent.scrollHeight + 'px';
}
});
}
.row-details{
max-height: 0;
overflow: hidden;
transition: all 300ms ease;
}
table {
border-collapse: unset;
}
<table>
<tr>
<th>Date</th>
<th>Data-1</th>
<th>Data-2</th>
</tr>
<tr class="row">
<td>Lorem</td>
<td>ipsum</td>
<td>dolor sit amet.</td>
</tr>
<tr>
<td colspan="3">
<div class="row-details">
<span>Lorem, ipsum.</span>
</div>
</td>
</tr>
<tr class="row">
<td>Lorem</td>
<td>ipsum</td>
<td>dolor sit amet.</td>
</tr>
<tr>
<td colspan="3">
<div class="row-details">
<span>Lorem, ipsum.</span>
</div>
</td>
</tr>
</table>
