I'm trying to add Bootstrap Collapse to my table data. However, when I click the button, the table data collapses, but without any transition effect. I've double-checked that I have included jQuery, used collapse (not collapse in), and added aria-hidden="true", data-toggle="collapse", data-target, and id properly. This issue is not related to the screen width.
For reference, here's a link to my code pen https://codepen.io/mezavanessa/pen/RwrYgqM where you can find my HTML & CSS code.
<section id="tableExpandedRows">
<table class="table table-expanded expanded-row-bg-color">
<thead>
<tr>
<th>heading one</th>
<th>heading two</th>
<th>heading three </th>
<th>heading four</th>
<th>heading five</th>
<th>heading six</th>
<th class="sr-only">Supplier ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button class="btn-collapse icon-caret-width" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<img src="assets/img/icon-caret-down.svg" alt="" class="icon icon-caret-down">
</button>
209
</td>
<td>Gate Parts for Repair</td>
<td>Magnolia Heritage Construction</td>
<td>$32,456.92</td>
<td>Jul 15, 2019</td>
<td>Geralt Rivera </td>
<td class="sr-only">2165465536484</td>
</tr>
<tr class="collapse" id="collapseOne" role="cell" aria-hidden="true">
<td colspan="3" class="collapse-data">
<div class="table-expanded-data">
<h5>Supplier ID</h5>
<p>608</p>
</div>
<div class="table-expanded-data">
<h5>Ship To</h5>
<address>
Fairview Gardens<br>
567 Fairview Circle<br>
Columbia, SC 29073
</address>
</div>
<div class="table-expanded-data">
<h5>Ship To Code</h5>
<p>907</p>
</div>
</td>
</tr>
</section>
.table {
background: $off-white;
border: none;
thead {
background-color: rgba(5, 116, 176, 0.2);
border: 1px solid rgba(5, 116, 176, 0.1);
th {
border: none;
}
}
th {
font-size: 0.875em;
}
th,
td {
padding: 1rem;
}
tr:first-child {
td {
border-top: none;
}
}
}
th {
border: none;
}
td {
border-color: rgba(52, 77, 91, 0.36);
}
.table-expanded-open tr:nth-child() {
background-color: $table-accent-bg;
}
// Expanded Rows//
.btn-collapse .icon-caret-down {
transition: transform 0.2s ease-out;
}
.btn-collapse[aria-expanded="true"] .icon-caret-down {
transform: rotate(0.5turn);
}
.table-expanded-data {
display: inline-block;
padding: 0 1em;
vertical-align: top;
}