JSFiddle - React, Tailwind, and code Playground

by kayenglajom

HTML

<script type="text/javascript">

		function sortUnorderedList(ul, sortDescending) {
			if(typeof ul == "string")
				ul = document.getElementById(ul);

			var lis = ul.getElementsByTagName("li");
			var vals = [];

			for(var i = 0, l = lis.length; i < l; i++)
				vals.push(lis[i].innerHTML);

			vals.sort();

			if(sortDescending)
				vals.reverse();

			for(var i = 0, l = lis.length; i < l; i++)
				lis[i].innerHTML = vals[i];
		}

		window.onload = function() {
			var desc = false;
			document.getElementById("sort").onclick = function() {
				sortUnorderedList("pizza-list", desc);
				desc = !desc;
				return false;
			}
		}

	</script>
<input type="button" id="sort" value="SORTERA"/>
<div id="box-one" class="box">
  <ul id="pizza-list" class="grid-container">

					<li class="block first">Margerita</li>

					<li class="block first">Amigo</li>

					<li class="block first">Jamaica</li>

					<li class="block first">Marinara</li>

					<li class="block first">Florida</li>

					<li class="block first">Caruso</li>


				</ul>

</div>
<div id="box-two" class="box">
  <ul id="pizza-list" class="grid-container">


					<li class="block second">Africana</li>

					<li class="block second">Vegetale</li>

					<li class="block second">Quattro Stagioni</li>

					<li class="block second">Mexicanska</li>

					<li class="block second">Hawaii</li>

					<li class="block second">Ingen Köttpizza</li>

				</ul>

</div>

<ul id="ul-menu-list">
    <div id="tabone">1</div>
    <div id="tabtwo">2</div>

</ul>

CSS

#box-one {
    display: block;
    width:200px height:200px;
    background:green;
}
#box-two {
    display: none;
    width:200px height:200px;
    background:blue;
}
#box-three {
    display: none;
    width:200px height:200px;
    background:gray;
}

JavaScript

$("#ul-menu-list div").click(function () {
    $('.box').hide().eq($(this).index()).show();
});