JSFiddle - React, Tailwind, and code Playground

by radu

HTML

<link rel="stylesheet" href="http://www.envisiondemo.com/lookout/wp-content/themes/lookout/style.css">
<div id="map">
        
            <h2>Choose your state:</h2>
            
            <div id="states">
                <img id="Image-ak" src="http://www.envisiondemo.com/lookout/wp-content/themes/lookout/images/map/alaska_4.png" border="0" width="131" height="89" alt="Alaska" style="cursor: pointer; ">
                <img id="Image-hi" src="http://www.envisiondemo.com/lookout/wp-content/themes/lookout/images/map/hawaii_4.png" border="0" width="51" height="28" alt="Hawaii" style="cursor: pointer; ">
                <img id="Image-or" src="http://www.envisiondemo.com/lookout/wp-content/themes/lookout/images/map/oregon_4.png" border="0" width="60" height="51" alt="Oregon" style="cursor: pointer; ">
                <img id="Image-wa" src="http://www.envisiondemo.com/lookout/wp-content/themes/lookout/images/map/washington_4.png" border="0" width="51" height="37" alt="Washington" style="cursor: pointer; ">    
                <img id="Image-id" src="http://www.envisiondemo.com/lookout/wp-content/themes/lookout/images/map/idaho_3.png" border="0" width="45" height="73" alt="Idaho" style="cursor: pointer; ">
                <img id="Image-ca" src="http://www.envisiondemo.com/lookout/wp-content/themes/lookout/images/map/california_4.png" border="0" width="60" height="102" alt="California" style="cursor: pointer; ">            
                <img id="Image-nv" src="http://www.envisiondemo.com/lookout/wp-content/themes/lookout/images/map/nevada_3.png" border="0" width="48" height="73" alt="Nevada" style="cursor: pointer; ">            
                <img id="Image-ut" src="http://www.envisiondemo.com/lookout/wp-content/themes/lookout/images/map/utah_2.png" border="0" width="43" height="53" alt="Utah" style="cursor: pointer; ">            
                <img id="Image-az" src="http://www.envisiondemo.com/lookout/wp-content/themes/lookout/images/map/arizona_1.png"...

JavaScript

$(document).ready(function() {
    var $switchers = $('#switchers li'),
        $states = $('#state_info div');

    $switchers.click(function() {
        $switchers.removeClass('active');
        $states.removeClass('active');
        $(this).addClass('active');
        $('#_' + this.id).addClass('active');
    })
});