I am facing an issue with a hidden html table inside a collapsible element. Whenever the collapsible is expanded, there seems to be a substantial gap below the table. I'm unable to identify the cause of this problem.
Below, you will find images and a demo that illustrate the issue. Your assistance is greatly appreciated.
Collapsible Expanded
https://i.sstatic.net/LZBvS.png
Collapsible Closed
https://i.sstatic.net/cSgIH.png
DEMO:
var coll = document.getElementsByClassName("collapsible");
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.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}.collapsible{
background-color: #1E1E1E;
border: none;
cursor: pointer;
}
.collapsible:before {
content: '▶';
font-size: 10px;
float: left;
color: white;
padding-top: 13px;
}
.collapsible.active:before {
content: "▼";
}
.content {
padding: 0 0px;
overflow: hidden;
color: white;
font-size: 10px;
font-family: 'Oswald', sans-serif;
max-height: 0;
transition: max-height 0.2s ease-out;
}<button type="button" class="collapsible"><h3 id="Accounts"> Fiat Accounts</h3></button>
<div class="content" id="acc_list">
<table class="acc_table" id="acc_table">
<tr id=acc_row1>
<td id="acc_name1" class="accname">Cash</td>
<td id="acc_balance1" class="accbal">$5322.54<button class="edit_account" id="editaccounts">✎</button></td>
</tr>
<tr id=acc_row2>
<td id="acc_name2" class="accname">Credit Card</td>
<td id=acc_balance2 class="accbal">$1362.21<button class="edit_account" id="editaccounts">✎</button></td>
</tr>
<tr id=acc_row3>
<td id="acc_name3" class="accname">Checking Account</td>
<td id=acc_balance3 class="accbal">$4322.50<button class="edit_account" id="editaccounts">✎</button></td>
</tr>
<tr id=acc_row4>
<td id="acc_name4" class="accname">Savings Account</td>
<td id=acc_balance4 class="accbal">$12322.50<button class="edit_account" id="editaccounts">✎</button></td>
</tr>
</table>
</div>