JSFiddle - React, Tailwind, and code Playground

by Sajad Abbasi

HTML

<body>
<div class="container">
		<ul class="nav">
            <li class="sth1"><a href="#">sth1</a></li>
			<li>sth2</li>
			<li>sth3</li>
		</ul>
	</div>
	
	<ul class="menu">
			<li>somthingWider1</li>
			<li>somthingWider2</li>
			<li>somthingWider3</li>
	</ul>
    <button>Back</button>
<body>

CSS

.container{
    float: right;
    background-color: grey;
}
.menu{
    display: none;
}

JavaScript

var container = $(".container");
var nav = $(".nav");
var menu = $(".menu");

$(".sth1").click(function(){
	nav.detach();
	menu.appendTo(container);
	menu.show();
});

$("button").click(function(){
    menu.detach();
	nav.appendTo(container);
    });