Bootstrap 5 Expandable Row Table
A clean orders table where each row expands to reveal product, quantity and shipping details, with an expand-all control.
<section class="orders-section wdw-stage">
<div class="container">
<div class="card wdw-card border-0 overflow-hidden orders-card">
<div class="card-header bg-body border-0 p-4 pb-3">
<div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
<div>
<h2 class="h4 wdw-heading mb-1">Recent orders</h2>
<p class="text-body-secondary small mb-0">Select a row to see line items and shipping details.</p>
</div>
<dl class="stat-strip d-flex mb-0 rounded-4 bg-body-tertiary">
<div class="stat px-4 py-2"><dt class="small text-body-secondary fw-medium">Orders</dt><dd class="fs-3 fw-bold mb-0 lh-1 text-body-emphasis">4</dd></div>
<div class="stat px-4 py-2"><dt class="small text-body-secondary fw-medium">Revenue</dt><dd class="fs-3 fw-bold mb-0 lh-1 text-body-emphasis">$13.7k</dd></div>
<div class="stat px-4 py-2"><dt class="small text-body-secondary fw-medium">Fulfilled</dt><dd class="fs-3 fw-bold mb-0 lh-1 text-body-emphasis">50%</dd></div>
</dl>
</div>
<div class="d-flex align-items-center justify-content-between gap-3 mt-4 toolbar">
<ul class="nav nav-pills gap-1 flex-nowrap order-filters" aria-label="Filter orders by status">
<li class="nav-item"><button type="button" class="nav-link active rounded-pill px-3 text-nowrap" data-filter="all">All</button></li>
<li class="nav-item"><button type="button" class="nav-link rounded-pill px-3 text-nowrap" data-filter="fulfilled">Fulfilled</button></li>
<li class="nav-item"><button type="button" class="nav-link rounded-pill px-3 text-nowrap" data-filter="placed">Placed</button></li>
<li class="nav-item"><button type="button" class="nav-link rounded-pill px-3 text-nowrap" data-filter="delivered">Delivered</button></li>
</ul>
<button type="button" class="btn btn-outline-primary rounded-pill px-4 text-nowrap flex-none" id="expandAllOrders">Expand all</button>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover align-middle mb-0 orders-table">
<thead>
<tr class="text-body-secondary text-uppercase">
<th scope="col" class="ps-4 text-nowrap">Order</th>
<th scope="col" class="d-none d-sm-table-cell">Customer</th>
<th scope="col" class="d-none d-md-table-cell">Status</th>
<th scope="col" class="text-end pe-4">Total</th>
<th scope="col" class="d-none d-lg-table-cell ps-4">Created</th>
<th scope="col" class="pe-4"><span class="visually-hidden">Toggle details</span></th>
</tr>
</thead>
<tbody>
<tr class="order-row" data-status="fulfilled">
<td class="ps-4 text-nowrap"><span class="fw-semibold">#SO-13487</span><span class="d-block d-sm-none small text-body-secondary">Gasper Antunes</span><span class="d-md-none small text-body-secondary d-flex align-items-center gap-1 mt-1"><span class="status-dot bg-success" aria-hidden="true"></span>Fulfilled</span></td>
<td class="d-none d-sm-table-cell"><div class="d-flex align-items-center gap-2"><span class="avatar-initials bg-success-subtle text-success-emphasis" aria-hidden="true">GA</span><span class="fw-medium">Gasper Antunes</span></div></td>
<td class="d-none d-md-table-cell"><span class="badge rounded-pill status-badge bg-success-subtle text-success-emphasis"><span class="status-dot bg-success" aria-hidden="true"></span>Fulfilled</span></td>
<td class="text-end pe-4 fw-semibold">$2,674.00</td>
<td class="d-none d-lg-table-cell ps-4 text-body-secondary">Today</td>
<td class="pe-4 text-end">
<button type="button" class="btn btn-sm border rounded-circle toggle-btn bg-body-tertiary text-body-emphasis" aria-expanded="false" aria-controls="order-1" aria-label="Show details for order SO-13487"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
</td>
</tr>
<tr class="detail-row"><td colspan="6" class="p-0 border-0">
<div class="collapse" id="order-1"><div class="detail-box mx-4 mb-3 p-3 rounded-3 bg-body-tertiary"><div class="row g-3 small">
<div class="col-sm-5"><div class="text-body-secondary">Product</div><div class="fw-medium">iPhone 15 Pro, 256 GB</div></div>
<div class="col-sm-3"><div class="text-body-secondary">Quantity</div><div class="fw-medium">2</div></div>
<div class="col-sm-4"><div class="text-body-secondary">Ships to</div><div class="fw-medium">Lisbon, Portugal</div></div>
</div></div></div>
</td></tr>
<tr class="order-row" data-status="fulfilled">
<td class="ps-4 text-nowrap"><span class="fw-semibold">#SO-13488</span><span class="d-block d-sm-none small text-body-secondary">Tinder Steel</span><span class="d-md-none small text-body-secondary d-flex align-items-center gap-1 mt-1"><span class="status-dot bg-success" aria-hidden="true"></span>Fulfilled</span></td>
<td class="d-none d-sm-table-cell"><div class="d-flex align-items-center gap-2"><span class="avatar-initials bg-success-subtle text-success-emphasis" aria-hidden="true">TS</span><span class="fw-medium">Tinder Steel</span></div></td>
<td class="d-none d-md-table-cell"><span class="badge rounded-pill status-badge bg-success-subtle text-success-emphasis"><span class="status-dot bg-success" aria-hidden="true"></span>Fulfilled</span></td>
<td class="text-end pe-4 fw-semibold">$3,664.00</td>
<td class="d-none d-lg-table-cell ps-4 text-body-secondary">Yesterday</td>
<td class="pe-4 text-end">
<button type="button" class="btn btn-sm border rounded-circle toggle-btn bg-body-tertiary text-body-emphasis" aria-expanded="false" aria-controls="order-2" aria-label="Show details for order SO-13488"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
</td>
</tr>
<tr class="detail-row"><td colspan="6" class="p-0 border-0">
<div class="collapse" id="order-2"><div class="detail-box mx-4 mb-3 p-3 rounded-3 bg-body-tertiary"><div class="row g-3 small">
<div class="col-sm-5"><div class="text-body-secondary">Product</div><div class="fw-medium">MacBook Air 13", M3</div></div>
<div class="col-sm-3"><div class="text-body-secondary">Quantity</div><div class="fw-medium">3</div></div>
<div class="col-sm-4"><div class="text-body-secondary">Ships to</div><div class="fw-medium">Berlin, Germany</div></div>
</div></div></div>
</td></tr>
<tr class="order-row" data-status="placed">
<td class="ps-4 text-nowrap"><span class="fw-semibold">#SO-13489</span><span class="d-block d-sm-none small text-body-secondary">Micro Steel</span><span class="d-md-none small text-body-secondary d-flex align-items-center gap-1 mt-1"><span class="status-dot bg-warning" aria-hidden="true"></span>Placed</span></td>
<td class="d-none d-sm-table-cell"><div class="d-flex align-items-center gap-2"><span class="avatar-initials bg-warning-subtle text-warning-emphasis" aria-hidden="true">MS</span><span class="fw-medium">Micro Steel</span></div></td>
<td class="d-none d-md-table-cell"><span class="badge rounded-pill status-badge bg-warning-subtle text-warning-emphasis"><span class="status-dot bg-warning" aria-hidden="true"></span>Placed</span></td>
<td class="text-end pe-4 fw-semibold">$2,674.00</td>
<td class="d-none d-lg-table-cell ps-4 text-body-secondary">March 20, 2026</td>
<td class="pe-4 text-end">
<button type="button" class="btn btn-sm border rounded-circle toggle-btn bg-body-tertiary text-body-emphasis" aria-expanded="false" aria-controls="order-3" aria-label="Show details for order SO-13489"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
</td>
</tr>
<tr class="detail-row"><td colspan="6" class="p-0 border-0">
<div class="collapse" id="order-3"><div class="detail-box mx-4 mb-3 p-3 rounded-3 bg-body-tertiary"><div class="row g-3 small">
<div class="col-sm-5"><div class="text-body-secondary">Product</div><div class="fw-medium">iPad Pro 11", Wi-Fi</div></div>
<div class="col-sm-3"><div class="text-body-secondary">Quantity</div><div class="fw-medium">1</div></div>
<div class="col-sm-4"><div class="text-body-secondary">Ships to</div><div class="fw-medium">Paris, France</div></div>
</div></div></div>
</td></tr>
<tr class="order-row" data-status="delivered">
<td class="ps-4 text-nowrap"><span class="fw-semibold">#SO-13490</span><span class="d-block d-sm-none small text-body-secondary">B Mobiles</span><span class="d-md-none small text-body-secondary d-flex align-items-center gap-1 mt-1"><span class="status-dot bg-primary" aria-hidden="true"></span>Delivered</span></td>
<td class="d-none d-sm-table-cell"><div class="d-flex align-items-center gap-2"><span class="avatar-initials bg-primary-subtle text-primary-emphasis" aria-hidden="true">BM</span><span class="fw-medium">B Mobiles</span></div></td>
<td class="d-none d-md-table-cell"><span class="badge rounded-pill status-badge bg-primary-subtle text-primary-emphasis"><span class="status-dot bg-primary" aria-hidden="true"></span>Delivered</span></td>
<td class="text-end pe-4 fw-semibold">$4,674.00</td>
<td class="d-none d-lg-table-cell ps-4 text-body-secondary">March 22, 2026</td>
<td class="pe-4 text-end">
<button type="button" class="btn btn-sm border rounded-circle toggle-btn bg-body-tertiary text-body-emphasis" aria-expanded="false" aria-controls="order-4" aria-label="Show details for order SO-13490"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
</td>
</tr>
<tr class="detail-row"><td colspan="6" class="p-0 border-0">
<div class="collapse" id="order-4"><div class="detail-box mx-4 mb-3 p-3 rounded-3 bg-body-tertiary"><div class="row g-3 small">
<div class="col-sm-5"><div class="text-body-secondary">Product</div><div class="fw-medium">Galaxy S24 Ultra</div></div>
<div class="col-sm-3"><div class="text-body-secondary">Quantity</div><div class="fw-medium">4</div></div>
<div class="col-sm-4"><div class="text-body-secondary">Ships to</div><div class="fw-medium">Madrid, Spain</div></div>
</div></div></div>
</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
/* Web Designer Wall library style — shared base for every Bootstrap 5 snippet.
Indigo accent, Plus Jakarta Sans, soft cards, pill buttons. Works in light and dark. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
:root,
[data-bs-theme="light"] {
--wdw-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--bs-body-font-family: var(--wdw-font);
--bs-primary: #4f46e5;
--bs-primary-rgb: 79, 70, 229;
--bs-primary-text-emphasis: #3730a3;
--bs-primary-bg-subtle: #eef2ff;
--bs-primary-border-subtle: #c7d2fe;
--bs-link-color: #4f46e5;
--bs-link-color-rgb: 79, 70, 229;
--bs-link-hover-color: #4338ca;
--bs-link-hover-color-rgb: 67, 56, 202;
--bs-focus-ring-color: rgba(79, 70, 229, 0.25);
--bs-border-radius: 0.75rem;
--bs-border-radius-lg: 1rem;
--bs-border-radius-xl: 1.25rem;
--wdw-radius-card: 1.25rem;
--wdw-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 16px 40px -16px rgba(16, 24, 40, 0.22);
--wdw-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px -4px rgba(16, 24, 40, 0.12);
--wdw-stage: #f5f6fb;
}
[data-bs-theme="dark"] {
--bs-primary: #818cf8;
--bs-primary-rgb: 129, 140, 248;
--bs-primary-text-emphasis: #c7d2fe;
--bs-primary-bg-subtle: rgba(129, 140, 248, 0.14);
--bs-primary-border-subtle: rgba(129, 140, 248, 0.35);
--bs-link-color: #a5b4fc;
--bs-link-color-rgb: 165, 180, 252;
--bs-link-hover-color: #c7d2fe;
--bs-link-hover-color-rgb: 199, 210, 254;
--bs-focus-ring-color: rgba(129, 140, 248, 0.35);
--wdw-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
--wdw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
--wdw-stage: #0f1117;
}
body { font-family: var(--wdw-font); -webkit-font-smoothing: antialiased; }
/* Bootstrap compiles its blue into these components; point them at the accent. */
.btn-primary {
--bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca;
--bs-btn-active-bg: #3730a3; --bs-btn-active-border-color: #3730a3;
--bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary);
--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0f1117; --bs-btn-hover-bg: #a5b4fc; --bs-btn-hover-border-color: #a5b4fc; --bs-btn-hover-color: #0f1117; --bs-btn-active-color: #0f1117; }
.btn-outline-primary {
--bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary);
--bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary);
--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn { --bs-btn-font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-sm { min-height: 36px; }
.form-control, .form-select { min-height: 44px; border-radius: .75rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: rgba(var(--bs-primary-rgb), .6); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); }
.nav { --bs-nav-link-color: var(--bs-secondary-color); --bs-nav-link-hover-color: var(--bs-emphasis-color); }
.pagination { --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-color: var(--bs-body-color); --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--bs-primary); }
.list-group { --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary); border-radius: .875rem; box-shadow: var(--wdw-shadow-sm); }
.accordion { --bs-accordion-active-bg: var(--bs-primary-bg-subtle); --bs-accordion-active-color: var(--bs-primary-text-emphasis); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.badge { font-weight: 600; }
/* Library building blocks — use these instead of re-inventing them per snippet. */
.wdw-stage { min-height: 100vh; display: flex; align-items: center; background: var(--wdw-stage); padding-block: 3rem; }
.wdw-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: var(--wdw-radius-card); box-shadow: var(--wdw-shadow); }
.wdw-card-sm { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 1rem; box-shadow: var(--wdw-shadow-sm); }
.wdw-aurora { position: relative; color: #fff; background: radial-gradient(60% 55% at 100% 0, #818cf8 0, transparent 70%), radial-gradient(65% 60% at 0 100%, #ec4899 0, transparent 65%), #1e1b4b; }
.wdw-eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-primary); }
.wdw-heading { font-weight: 800; letter-spacing: -.02em; color: var(--bs-emphasis-color); }
.wdw-muted { color: var(--bs-secondary-color); }
.wdw-icon { width: 2.75rem; height: 2.75rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: .875rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
/* Component */
.orders-card { max-width: 960px; margin-inline: auto; width: 100%; }
.orders-section.wdw-stage { padding-block: 1.5rem; }
.orders-table { --bs-table-bg: transparent; }
.orders-table thead th { color: var(--bs-secondary-color); font-weight: 600; font-size: .75rem; letter-spacing: .08em; border-bottom: 1px solid var(--bs-border-color); padding-block: .75rem; }
.orders-table tbody td { padding-block: 1.1rem; border-bottom: 0; }
.orders-table .order-row { border-top: 1px solid var(--bs-border-color-translucent); }
.orders-table tbody tr.order-row:first-child { border-top: 0; }
.order-row { cursor: pointer; }
.detail-row > td { background: transparent; }
.detail-box { border: 1px solid var(--bs-border-color-translucent); }
.avatar-initials { width: 2rem; height: 2rem; border-radius: 50%; display: inline-grid; place-items: center; font-size: .75rem; font-weight: 600; flex: none; }
.status-badge { font-size: .8125rem; font-weight: 500; padding: .4em .8em; display: inline-flex; align-items: center; gap: .45rem; }
.status-dot { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; }
.stat + .stat { border-left: 1px solid var(--bs-border-color); }
.stat-strip dt { margin: 0 0 .35rem; }
.toolbar .order-filters { overflow-x: auto; scrollbar-width: none; }
.flex-none { flex: none; }
.orders-card .card-header { padding-bottom: 1rem !important; }
.order-filters .nav-link { min-height: 2.5rem; color: var(--bs-body-color); }
.order-filters .nav-link.active { color: #fff; }
[data-bs-theme="dark"] .order-filters .nav-link.active { color: #0f1117; }
.toggle-btn { width: 2.25rem; min-width: 2.25rem; height: 2.25rem; padding: 0; display: inline-grid; place-items: center; }
.toggle-btn svg { transition: transform .2s ease; }
.toggle-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.order-row.is-open { background: var(--bs-tertiary-bg); }
@media (max-width: 575.98px) {
.orders-table { font-size: .875rem; }
.orders-table th, .orders-table td { padding-inline: .5rem; }
.orders-table .ps-4 { padding-left: .75rem !important; }
.orders-table .pe-4 { padding-right: .5rem !important; }
.toggle-btn { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; }
.detail-box { margin-inline: .75rem !important; }
.stat-strip { width: 100%; }
.stat { flex: 1; padding: .6rem .75rem !important; }
.stat dd { font-size: 1.25rem !important; }
.toolbar { flex-wrap: wrap; }
.toolbar .order-filters { width: 100%; }
.toolbar #expandAllOrders { width: 100%; }
.order-filters .nav-link { padding-inline: .85rem !important; }
}
@media (prefers-reduced-motion: reduce) { .toggle-btn svg { transition: none; } }
(function () {
function initOrderTable() {
var rows = document.querySelectorAll('.order-row');
var allBtn = document.getElementById('expandAllOrders');
if (!rows.length) return;
function panel(row) { return row.nextElementSibling.querySelector('.collapse'); }
rows.forEach(function (row) {
var btn = row.querySelector('.toggle-btn');
var inst = bootstrap.Collapse.getOrCreateInstance(panel(row), { toggle: false });
var el = panel(row);
el.addEventListener('show.bs.collapse', function () { btn.setAttribute('aria-expanded', 'true'); row.classList.add('is-open'); });
el.addEventListener('hide.bs.collapse', function () { btn.setAttribute('aria-expanded', 'false'); row.classList.remove('is-open'); });
row.addEventListener('click', function (e) { if (e.target.closest('.toggle-btn') && e.target.closest('.toggle-btn') !== btn) return; inst.toggle(); });
});
if (!allBtn) return;
allBtn.addEventListener('click', function () {
var open = allBtn.dataset.open !== '1';
rows.forEach(function (row) { var i = bootstrap.Collapse.getOrCreateInstance(panel(row), { toggle: false }); open ? i.show() : i.hide(); });
allBtn.dataset.open = open ? '1' : '0';
allBtn.textContent = open ? 'Collapse all' : 'Expand all';
});
}
function initOrderFilters() {
var btns = document.querySelectorAll('.order-filters [data-filter]');
if (!btns.length) return;
btns.forEach(function (b) {
b.addEventListener('click', function () {
btns.forEach(function (x) { x.classList.toggle('active', x === b); });
var f = b.dataset.filter;
document.querySelectorAll('.order-row').forEach(function (row) {
var show = f === 'all' || row.dataset.status === f;
row.hidden = !show;
row.nextElementSibling.hidden = !show;
});
});
});
}
initOrderTable();
initOrderFilters();
})();
Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.
