There are two unordered list items in a container div and one swap button. When the swap button is clicked, the order of items needs to change. This functionality can be achieved using the following swap function.
var ints = [ "1", "2", "3", "4" ],
chars = [ "A", "B", "C", "D"],
list1 = document.getElementById("list1"),
list2 = document.getElementById("list2"),
toggle = 0;
setList(list1, ints);
setList(list2, chars);
function setList(element, data) {
for (var i in data) {
var elem = document.createElement("li");
elem.innerText = data[i];
element.appendChild(elem);
}
}
function swap() {
list1.innerHTML = "";
list2.innerHTML = "";
if(toggle==0) {
setList(list1, chars);
setList(list2, ints);
toggle=1;
} else {
setList(list1, ints);
setList(list2, chars);
toggle=0;
}
}.box {
display: flex;
align-items: center;
position: absolute;
top: 20px !important;
}<div class="box">
<ul id="list1"></ul>
<ul id="list2"></ul>
</div>
<button id="btn" onclick="swap()">Swap</button>I am curious if this functionality could be achieved using CSS alone. Feel free to test the code on Codepen at https://codepen.io/imjaydeep/pen/EBvaxG?editors=1111