Swap HTML Elements Using Javascript
It is quite easy to use javascript to swap between divs or any other html dom elements.
Using the function below you can pass the id of the element to show and to hide.
I used this pattern a lot for building tabbed interfaces and toggle panels before CSS-only solutions became practical. It’s straightforward — just flip the display property between block and none. If you need transitions or animations, you’d want to use CSS classes with opacity or height instead, since display: none can’t be animated. For more complex show/hide logic with multiple elements, a framework like jQuery or Alpine.js handles it more cleanly, but for a quick two-element toggle this vanilla approach works fine.
function swapDivs(show, hide){
document.getElementById(show).style.display = "block";
document.getElementById(hide).style.display = "none";
}