JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="navigation">
    <ul>
        <li><a href="item1">Item 1</a></li>
        <li><a href="item2">Item 2</a></li>
        <li><a href="item3">Item 3</a></li>
    </ul>
</nav>
<section id="content">
    <p>Content in here refers to a page in the Wordpress back-end</p>
</section>

CSS

#navigation {
    float: left;
    width: 200px;
    height: 200px;
    background: red;
}

#content {
    display: none;
    float: right;
    width: 400px;
    height: 200px;
    background: red;
}

JavaScript

$("#navigation li a").click(function (event) {
    event.preventDefault();
		
	var effect = 'slide',					// Set the effect type
		options = { direction: 'left' },	// Set the options for the effect type chosen
		duration = 700;						// Set the duration
			
	$('#content').toggle(effect, options, duration);
});