JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
	<div id="navContainer">
		<ul>
			<li>
			<a href='' class='tabButton' data-openTab='1'>1</a>
			</li>
			<li>
			<a href='' class='tabButton' data-openTab='2'>2</a>
			</li>
			<li>
			<a href='' class='tabButton' data-openTab='3'>3</a>
			</li>
			<li>
			<a href='' class='tabButton' data-openTab='4'>4</a>
			</li>
			<li>
			<a href='' class='tabButton' data-openTab='5'>5</a>
			</li>
		</ul>
	</div>
	<div id = "tabCont" class="tabContainer">
		<div id="1">1
			<a href="" class="closeButton"> CLOSE </a>
		</div>
		<div id="2" >2
			<a href="" class="closeButton"> CLOSE </a>
		</div>
		<div id="3" > 3
			<a href="" class="closeButton"> CLOSE </a>
		</div>
		<div id="4" >  4
			<a href="" class="closeButton"> CLOSE </a>
		</div>
		<div id="5" >   5
			<a href="" class="closeButton"> CLOSE </a>
		</div>
	</div>
</nav>

JavaScript

document.menuIsOpen = true;
        $('.tabContainer > div').hide();
        $("#1").show();
        $('.tabButton').click(function(event) {
            var
                open = $("#" + $(this).attr('data-openTab')),
                isOpened = open.is('.opened');
            
            event.preventDefault();
            if (document.menuIsOpen) {
                document.menuIsOpen = false;
                $('.opened').hide("slow").removeClass('opened');
            }
            if (!isOpened) {
                document.menuIsOpen = true;
                open.addClass('opened').show("slow").css("display", "block");
            }
        });
        $('.closeButton').click(function(event) {
            event.preventDefault();
            $('.opened').hide("slow").removeClass('opened');
        });
        $('.tabContainer > div').hide();