JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="nav">First nav</div>
    <div class="nav">Second nav</div>
</div>
<a class="swapIt" href="javascript:void(0)">swap menu</a>

CSS

.main .nav:nth-child(1) {  }

.main .nav:nth-child(2) { display: none; }

JavaScript

$(document).ready(function() {
    if( $(".main .nav:nth-child(1)").is(":visible") ) {
        $(".main .nav:nth-child(1)").hide();
        $(".main .nav:nth-child(2)").show();
    }
    else {
        $(".main .nav:nth-child(2)").hide();
        $(".main .nav:nth-child(1)").show();        
    }
});