JSFiddle - React, Tailwind, and code Playground
HTML
<li class="active">
<a class="showSingle" target="1">Show div 1</a>
</li>
<li>
<a class="showSingle" target="2">Show div 2</a>
</li>
<br /><br />
<section id="div1" class="targetDiv">
Content div 1
</section>
<section id="div2" class="targetDiv" style="display:none;">
Content div 2
</section>
JavaScript
$('.showSingle').click(function() {
if( !$(this).closest('li').hasClass('.active') ) {
$('.active').closest('li').removeClass('active');
$(this).closest('li').addClass('active');
$('.targetDiv').not('#div' + $(this).attr('target')).hide();
$('#div' + $(this).attr('target')).toggle();
}
});