JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="navigation">
    <ul>
        <li><a href="item1" id="item1">Item 1</a></li>
        <li><a href="item2" id="item2">Item 2</a></li>
        <li><a href="item3" id="item3">Item 3</a></li>
    </ul>
</nav>
<section id="content1" class="content">
    <p>Content in here refers to a page in the Wordpress back-end 1</p>
</section>
<section id="content2" class="content">
    <p>Content in here refers to a page in the Wordpress back-end 2</p>
</section>
<section id="content3" class="content">
    <p>Content in here refers to a page in the Wordpress back-end 3</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
        id = this.id.replace('item','');
	
    if ($('.out').length>0){
        $('.out').toggle(effect,options,duration, function(){
            $(this).removeClass('out');
            $('#content'+id).toggle(effect, options, duration, function(){
                $(this).addClass('out');
            });
        });
    } else {
        $('#content'+id).toggle(effect, options, duration, function(){    
                $(this).addClass('out');
        });
    }
});