#iline-pill-filter { --p: #383B13; --bg: #F4F1EB; display: inline-flex; align-items: center; height: 42px; background: var(--bg); border: 1.5px solid var(--p); border-radius: 999px; position: relative; overflow: hidden; font-weight: 500; font-size: 14px; user-select: none; box-shadow: inset 0 0 0 1px rgba(56,59,19,0.08); margin: 30px 0; } #iline-pill-filter .active-part { position: absolute; top: 0; left: 0; height: 100%; background: var(--p); border-radius: 999px; transition: all .35s cubic-bezier(.16,1,.3,1); z-index: 1; } #iline-pill-filter .segments { display: flex; position: relative; z-index: 2; } #iline-pill-filter button { padding: 0 1.5rem; height: 42px; border: none; background: transparent; cursor: pointer; color: var(--p); font-weight: 500; transition: color .3s ease; } #iline-pill-filter .active { color: #fff !important; } #iline-pill-filter button:hover { opacity: 0.9; } jQuery(document).ready(function ($) { var individualForm = $('#individual-form'); var businessForm = $('#business-form'); var toggleIndividual = $('.toggle-individual'); var toggleBusiness = $('.toggle-business'); var activePart = $('#iline-pill-filter .active-part'); // Move the pill background function moveActive(el) { activePart.css({ width: el.outerWidth(), transform: 'translateX(' + el.position().left + 'px)' }); } // Activate a tab function activateTab(type) { if (type === 'business') { individualForm.hide(); businessForm.show(); toggleIndividual.removeClass('active'); toggleBusiness.addClass('active'); moveActive(toggleBusiness); } else { businessForm.hide(); individualForm.show(); toggleBusiness.removeClass('active'); toggleIndividual.addClass('active'); moveActive(toggleIndividual); } } // Read URL parameter const params = new URLSearchParams(window.location.search); const type = params.get('type'); // Initial state activateTab(type); // Individual click toggleIndividual.on('click', function (e) { e.preventDefault(); activateTab('individual'); // Update URL without reloading history.replaceState( {}, '', window.location.pathname + '?type=individual' ); }); // Business click toggleBusiness.on('click', function (e) { e.preventDefault(); activateTab('business'); // Update URL without reloading history.replaceState( {}, '', window.location.pathname + '?type=business' ); }); });