JSFiddle - React, Tailwind, and code Playground

by GaryC123

HTML

<div style="width:200px;height:200px;float:left">
<ul>
    <li id="country"><a href="#">country</a></li>
    <li id="game"><a href="#">game</a></li>
    <li id="drink"><a href="#">drink</a></li>
</ul>
</div>
<div style="width:200px;height:200px;float:left">
    <div id="countryList">
        <input type="checkbox">usa
        <input type="checkbox">mexico
        <input type="checkbox">canada
    </div>
    <div  id="gameList" class="h">
        <input type="checkbox">baseball
        <input type="checkbox">cricket
        <input type="checkbox">volley ball
    </div>
    <div  id="drinkList" class="h">
        <input type="checkbox">coke
        <input type="checkbox">pepsi
        <input type="checkbox">coffee
    </div>
</div>

JavaScript

$(document).ready(function() {
    $( "#country,#game,#drink" ).click(function(){
	 	  $( "#countryList,#gameList,#drinkList" ).hide();
		  $("#"+$(this).attr("id")+"List").show();
	});
});