JSFiddle - React, Tailwind, and code Playground

by philll_t

HTML

<div class="button-container">
    <a class="button" id="USradarChangeButton1">Current US Radar</a>
    <a class="button" id="USradarChangeButton2">US Radar 12 Hours</a>
    <a class="button" id="USradarChangeButton3">US Radar 7 Days</a>
</div>

<div id="img-container">
    <img class="radar-img" id="usradar1" src="http://trendting.com/wp-content/uploads/2014/05/giphy-225.gif" alt="Current US Radar">
    <img class="radar-img" id="usradar2" src="https://media3.giphy.com/media/H3MXq3XT4z2ec/200_s.gif" alt="US Radar 12 Hours">
    <img class="radar-img" id="usradar3" src="http://media.giphy.com/media/10Ocy3t9qoSOwE/giphy.gif" alt="US Radar 7 Days">
</div>

CSS

.button {
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #0022E6;
	display:inline-block;
	cursor:pointer;
	color:#0022E6;
	font-family:Verdana, Geneva, sans-serif;
	font-size:15px;
	padding:16px 21px;
	text-decoration:none;
	font-weight:bold;
}

.button:hover {
	background-color:#0022E6;
	border:0;
	color:white;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}

.button:active {
	position:relative;
	top:1px;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}

#usradar1 {
	display:inline;
}

#usradar2, 
#usradar3 {
	display:none;
}

JavaScript

$(document).ready(function(){
    $('#USradarChangeButton1').click(function(event) {

					$('#usradar1').css({
						'display': 'inline'
					});
					
					$('#usradar2').css({
						'display': 'none'
					});
					
					$('#usradar3').css({
						'display': 'none'
					});
                            event.preventDefault();
				});
			
			
			
                                       
				$('#USradarChangeButton2').click(function(event) {
                    event.preventDefualt();
					$('#usradar1').css({
						'display': 'none'
					});
					
					$('#usradar2').css({
						'display': 'inline'
					});
					
					$('#usradar3').css({
						'display': 'none'
					});
				});
			
			
			
                                   
				$('#USradarChangeButton3').click(function() {
                     event.preventDefault();
					$('#usradar1').css({
						'display': 'none'
					});
					
					$('#usradar2').css({
						'display': 'none'
					});
					
					$('#usradar3').css({
						'display': 'inline'
					});
				});
			
})