I am dealing with a table containing certain rows
Some of these rows are visible, while others are hidden.
The visible rows at the start are referred to as: mainTrs.
Clicking on a visible row will make all rows with a class matching its id visible.
Clicking it again will close all previously opened rows.
When invisible rows become visible, the table shifts.
I want the mainTrs to maintain the same width as its td-s.
(And the other rows should adjust accordingly).
For instance:
In the beginning, assuming this is the initial table setup:
https://i.sstatic.net/J8uML.png
These rows should retain their width when toggling.
Desirable outcomes:
https://i.sstatic.net/eSsaz.png
https://i.sstatic.net/sSTk6.png
As seen, the initial rows (red and blue) maintain the same width.
The other rows expand without affecting the red and blue ones.
Undesired outcomes:
https://i.sstatic.net/s007K.png
https://i.sstatic.net/KN2cW.png
This is problematic because the red and blue rows become wider than initially.
I attempted using max-width for the mainTrs but did not succeed.
This is an excerpt from my table:
<table>
<tr id="a123" onclick="toggleTable(this)" data-isOpen="false">
<td>name</td>
<td>last name</td>
</tr>
<tr class="tr_a123 hidden">
<td>this is my first cell</td>
<td>this is my second cell</td>
</tr>
<tr class="tr_a123 hidden">
<td>another text</td>
<td>another text</td>
</tr>
<tr id="a456" onclick="toggleTable(this)" data-isOpen="false">
<td>name</td>
<td>last name</td>
</tr>
<tr class="tr_a456 hidden">
<td>wow</td>
<td>more text</td>
</tr>
<tr class="tr_a456 hidden">
<td>something</td>
<td>sometimes</td>
</tr>
</table>
This shows the JavaScript in use:
function toggleTable(element) {
var isNeedToShowMore = $(element).attr('data-isOpen') == "false";
$(element).attr('data-isOpen', isNeedToShowMore);
var elementId = $(element).attr('id');
if (isNeedToShowMore) {
$('tr.tr_' + elementId).show();
}
else {
$('tr.tr_' + elementId).hide();
}
}
Here is the link to my fiddle demonstration: