Bootstrap 5 · Intermediate

Expandable Table Rows

Table rows that expand to reveal detail rows on click.

Requires Bootstrap 5. Add the CDN tags below to your page (styles in <head>, scripts before </body>). The downloaded file already includes them.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="card border-0 shadow-sm" style="max-width:400px"><table class="table mb-0 small"><tbody id="erBody">
  <tr><td><button class="btn btn-sm btn-link p-0 text-decoration-none" data-er>▸</button></td><td>Order #1042</td><td class="text-end">$129</td></tr>
  <tr class="er-detail" style="display:none"><td></td><td colspan="2" class="text-secondary small">2× Keyboard, 1× Mouse — shipped Mon</td></tr>
  <tr><td><button class="btn btn-sm btn-link p-0 text-decoration-none" data-er>▸</button></td><td>Order #1043</td><td class="text-end">$58</td></tr>
  <tr class="er-detail" style="display:none"><td></td><td colspan="2" class="text-secondary small">1× Cable — pending</td></tr>
</tbody></table></div>

document.querySelectorAll('#erBody [data-er]').forEach(function(b){b.onclick=function(){var det=b.closest('tr').nextElementSibling,open=det.style.display==='none';det.style.display=open?'table-row':'none';b.textContent=open?'▾':'▸'}});

Free to use.This component uses Bootstrap 5 (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.