Plan Comparison with Differences Toggle — Free "Show Only Differences" Table

<div class="pdc-wrap">
  <div class="pdc-toolbar">
    <h3>Compare plans</h3>
    <label class="pdc-switch">
      <input type="checkbox" id="pdcDiffOnly" />
      <span class="pdc-slider"></span>
      Show only differences
    </label>
  </div>

  <table class="pdc-table" id="pdcTable">
    <thead>
      <tr>
        <th class="pdc-corner">Feature</th>
        <th>Starter</th>
        <th>Pro</th>
        <th>Team</th>
      </tr>
    </thead>
    <tbody id="pdcBody">
      <tr><th>Price</th><td>$9/mo</td><td>$29/mo</td><td>$79/mo</td></tr>
      <tr><th>Projects</th><td>3</td><td>Unlimited</td><td>Unlimited</td></tr>
      <tr><th>Team members</th><td>1</td><td>1</td><td>10</td></tr>
      <tr><th>Storage</th><td>10GB</td><td>100GB</td><td>1TB</td></tr>
      <tr><th>Export to CSV</th><td>Yes</td><td>Yes</td><td>Yes</td></tr>
      <tr><th>API access</th><td>No</td><td>Yes</td><td>Yes</td></tr>
      <tr><th>Custom domains</th><td>No</td><td>Yes</td><td>Yes</td></tr>
      <tr><th>Email support</th><td>Yes</td><td>Yes</td><td>Yes</td></tr>
      <tr><th>Priority support</th><td>No</td><td>No</td><td>Yes</td></tr>
      <tr><th>SSO &amp; SAML</th><td>No</td><td>No</td><td>Yes</td></tr>
      <tr><th>Uptime SLA</th><td>No</td><td>No</td><td>99.9%</td></tr>
    </tbody>
  </table>

  <p class="pdc-empty" id="pdcEmpty" hidden>Every row is identical across these plans.</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f4f5fb;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}

.pdc-wrap{width:min(640px,96vw)}
.pdc-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.pdc-toolbar h3{font-size:18px;font-weight:800;color:#16182a}

.pdc-switch{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:#4a4f66;cursor:pointer;user-select:none}
.pdc-switch input{position:absolute;opacity:0;width:0;height:0}
.pdc-slider{position:relative;width:36px;height:20px;background:#d7dbe7;border-radius:99px;transition:background .15s;flex-shrink:0}
.pdc-slider::before{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.pdc-switch input:checked + .pdc-slider{background:#6366f1}
.pdc-switch input:checked + .pdc-slider::before{transform:translateX(16px)}

.pdc-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e7e9f2;border-radius:14px;overflow:hidden;font-size:13.5px}
.pdc-table th,.pdc-table td{padding:11px 14px;text-align:center;border-bottom:1px solid #eef0f6}
.pdc-table tbody th{text-align:left;color:#3b4156;font-weight:600;white-space:nowrap}
.pdc-corner{text-align:left;color:#9aa0b4;font-weight:600;font-size:12.5px}
.pdc-table thead th{color:#16182a;font-weight:800;font-size:13.5px;background:#fafafe}
.pdc-table td{color:#4a4f66}
.pdc-table tbody tr:last-child th,.pdc-table tbody tr:last-child td{border-bottom:none}
.pdc-table tr.pdc-hidden-row{display:none}
.pdc-table tr[data-diff="true"] th{color:#4338ca}
.pdc-table tr[data-diff="true"]{background:#fbfaff}

.pdc-empty{margin-top:12px;font-size:12.5px;color:#8a8fac;text-align:center}

var toggle = document.getElementById('pdcDiffOnly');
var body = document.getElementById('pdcBody');
var emptyMsg = document.getElementById('pdcEmpty');
var rows = Array.prototype.slice.call(body.querySelectorAll('tr'));

// A row is a "difference" when the plan cells don't all share the same
// text value — compares every cell in the row against the first one.
function markDifferences() {
  rows.forEach(function (row) {
    var cells = Array.prototype.slice.call(row.querySelectorAll('td'));
    var values = cells.map(function (c) { return c.textContent.trim(); });
    var allSame = values.every(function (v) { return v === values[0]; });
    row.dataset.diff = String(!allSame);
  });
}

function applyFilter() {
  var diffOnly = toggle.checked;
  var visibleCount = 0;

  rows.forEach(function (row) {
    var isDiff = row.dataset.diff === 'true';
    var shouldShow = !diffOnly || isDiff;
    row.classList.toggle('pdc-hidden-row', !shouldShow);
    if (shouldShow) visibleCount++;
  });

  emptyMsg.hidden = visibleCount > 0;
}

toggle.addEventListener('change', applyFilter);

markDifferences();
applyFilter();