Site Code and Class “single row working dropdown” Feb 1, 26

**This is a working JS code (0121) for Dropdown-Swap rows-chevron back arrow.in the live and preview modes, working well.** And works with the Additional CSS code ** (o121)

(function () {
if (document.body.classList.contains(‘elementor-editor-active’)) return;
function closest(el, sel){ return el && el.closest ? el.closest(sel) : null; }

const parent = document.querySelector(‘.a-one’);
if (!parent) return;

let swapped = false;
let currentSwapRow = null;

function closeAll(except){
parent.querySelectorAll(‘.dropdown-wrapper.app-row-dropdown.open’).forEach(dd => {
if (except && dd === except) return;
dd.classList.remove(‘open’);
});
parent.querySelectorAll(‘.app-row-header.app-row-dropdown-toggle.is-open’).forEach(t => {
t.classList.remove(‘is-open’);
});
}

function swapRows(rowA, rowB) {
const aNext = rowA.nextSibling;
const bNext = rowB.nextSibling;
const p = rowA.parentNode;
if (!p || p !== rowB.parentNode) return;

if (aNext === rowB) {
p.insertBefore(rowB, rowA);
} else if (bNext === rowA) {
p.insertBefore(rowA, rowB);
} else {
p.insertBefore(rowA, bNext);
p.insertBefore(rowB, aNext);
}
}

function toggleFor(trigger){
const row = closest(trigger, ‘.app-row’) || trigger.parentElement;
if (!row) return;

const dd = row.querySelector(‘.dropdown-wrapper.app-row-dropdown’);
if (!dd) return;

const row1 = parent.querySelector(‘.row1-wrap’);
if (!row1) return;

const willOpen = !dd.classList.contains(‘open’);

// clicking same swapped row again -> restore + close
if (swapped && currentSwapRow === row) {
closeAll(null);
swapRows(row, row1);
swapped = false;
currentSwapRow = null;
return;
}

// if another row was swapped in -> restore it first
if (swapped && currentSwapRow && currentSwapRow !== row) {
closeAll(null);
swapRows(currentSwapRow, row1);
swapped = false;
currentSwapRow = null;
}

// swap clicked row into Row 1 position (unless it already is Row 1)
if (row !== row1) {
swapRows(row, row1);
swapped = true;
currentSwapRow = row;
}

closeAll(willOpen ? dd : null);
dd.classList.toggle(‘open’, willOpen);
trigger.classList.toggle(‘is-open’, willOpen);
}

document.addEventListener(‘click’, function(e){
const trigger = closest(e.target, ‘.app-row-header.app-row-dropdown-toggle’);
const insideDropdown = closest(e.target, ‘.dropdown-wrapper.app-row-dropdown’);

if (trigger){
e.preventDefault();
toggleFor(trigger);
return;
}

if (!insideDropdown){
// restore swap when clicking outside
if (swapped && currentSwapRow) {
const row1 = parent.querySelector(‘.row1-wrap’);
closeAll(null);
if (row1) swapRows(currentSwapRow, row1);
swapped = false;
currentSwapRow = null;
} else {
closeAll();
}
}
});

document.addEventListener(‘keydown’, function(e){
if (e.key === ‘Escape’) {
if (swapped && currentSwapRow) {
const row1 = parent.querySelector(‘.row1-wrap’);
closeAll(null);
if (row1) swapRows(currentSwapRow, row1);
swapped = false;
currentSwapRow = null;
} else {
closeAll();
}
}
});
})();