JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="map-continents">
  <ul class="continents">
    <li class="c1"><a href="#africa">Africa</a></li>
    <li class="c2"><a href="#asia">Asia</a></li>
    <li class="c3"><a href="#australia">Australia</a></li>
    <li class="c4"><a href="#europe">Europe</a></li>
    <li class="c5"><a href="#north-america">North America</a></li>
    <li class="c6"><a href="#south-america">South America</a></li>
  </ul>
</div>
<div id="demo-agents" class="demo-agents-list wrapper">
  <ul>
    <li id="africa"><h3>Africa</h3><p>Some info about Africa</p>  </li>
    <li id="asia"><h3>Asia</h3><p>Some info about Asia</p>  </li>
    <li id="australia"><h3>Australia</h3><p>Some info about Australia</p>  </li>
    <li id="europe"><h3>Europe</h3><p>Some info about Europe</p>  </li>
    <li id="north-america"><h3>North America</h3><p>Some info about North America</p>  </li>
    <li id="south-america"><h3>South America</h3><p>Some info about South America</p>  </li>
  </ul>
</div>

JavaScript

$(function() {
	  $("#demo-agents li").hide();
    $(".continents li a").on('click', function(e) {
        var liToShow = $(this).attr("href");
        $("#demo-agents li").hide();
        if ($(liToShow).is(":visible"))
        $(liToShow).hide();
        
        if (!$(liToShow).is(":visible"))
        $(liToShow).show();
        
        
        e.preventDefault();
    });
});