JSFiddle - React, Tailwind, and code Playground

HTML

<ul id='list'>
    <li data-id="1">Toggle DIV #1</li>
	<li data-id="2">Toggle DIV #2</li>
	<li data-id="3">Toggle DIV #3</li>
	<li data-id='4'>Toggle DIV #4</li>
</ul>


<div data-id='1' class="listBlock"><h3>DIV #1</h3></div>
<div data-id='2' class="listBlock"><h3>DIV #2</h3></div>
<div data-id='3' class="listBlock"><h3>DIV #3</h3></div>
<div data-id='4' class="listBlock"><h3>DIV #4</h3></div>

CSS

#list>li {
    color: rgb(0, 0, 255);
    text-decoration: underline;
}
.listBlock {
    display: block;
}

JavaScript

function toggleListBlocks() {
    $('.listBlock').hide();
    $('.listBlock[data-id='+ $(this).data('id') +']').show();
}

$(document).ready(function(){
    $('#list>li').click(toggleListBlocks);
});