Решил сделать таблицу, у которой при нажатии кнопки показываются/скрываются строки. Всё работает хорошо, но есть одна маленькая неприятная проблема - когда строки скрываются, то там остаётся расстояние в несколько пикселей.
Попробовал добавить display: none; к #tchests tr.hidden td , но тогда не будет работать transition. Итоговый код гораздо больше, и всё завязано на тег table, поэтому предложение переверстать всё на div-ах мне не подходит.
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<style type="text/css">
#tchests { width: 25%; border-collapse: collapse; }
#tchests th, #tchests td { text-align: center; border-style: solid; border-color: #dcdcdc; }
#tchests tr.show-more td { cursor: pointer; border-top-width: 0; }
#tchests tr.hidden td { padding: 0; border-width: 0; overflow: hidden; transition: border-width 0s .50s linear, padding 0s .50s linear; }
#tchests tr.visible td { padding: 7px 8px; border-width: 3px; transition: padding .25s linear; }
#tchests tr.hidden td div { max-height: 0; transition: max-height .50s linear; }
#tchests tr.visible td div { max-height: 100px; transition: max-height .75s linear; }
</style>
<script type="text/javascript">
window.onload = function() {
document.querySelector('#tchests tr.show-more').onclick = function() {
let els = document.querySelectorAll('#tchests tr.hidden');
if (els.length > 0) {
for (let i = 0; i < els.length; i++) {
els[i].classList.remove('hidden');
els[i].classList.add('visible');
}
} else {
let els = document.querySelectorAll('#tchests tr.visible');
for (let i = els.length - 1; i >= 0; i--) {
els[i].classList.remove('visible');
els[i].classList.add('hidden');
}
}
};
};
</script>
</head>
<body>
<table id="tchests">
<tbody>
<tr class="top">
<th>A</th>
</tr>
<tr>
<td>
<div>1</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>2</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>3</div>
</td>
</tr>
<tr class="show-more">
<td colspan="3"><span>Show/Hide</span></td>
</tr>
</tbody>
</table>
</body>
</html>