JSFiddle - React, Tailwind, and code Playground

by velmurugansp

HTML

<div>
  <span id="color-1">Color 1</span>
  <span id="color-2">Color 2</span>
  <span id="color-3">Color 3</span>
  <span id="color-4">Color 4</span>
</div>
<div>
  <img id="car-1" src="https://stimg.cardekho.com/images/car-images/930x620/Maruti/Maruti-Swift/6324/Midnight-Blue_15234b.jpg?tr=w-898,e-sharpen" />
  <img id="car-2" src="https://stimg.cardekho.com/images/car-images/930x620/Maruti/Maruti-Swift/6324/Prime-Lucent-OrangeN_b52716.jpg?tr=w-898,e-sharpen" />
  <img id="car-3" src="https://stimg.cardekho.com/images/car-images/930x620/Maruti/Maruti-Swift/6324/Metallic-Silky-SilverN_6f6f6e.jpg?tr=w-898,e-sharpen" />
  <img id="car-4" src="https://stimg.cardekho.com/images/car-images/930x620/Maruti/Maruti-Swift/6324/Pearl-Arctic-WhiteN_e1e2e4.jpg?tr=w-898,e-sharpen" />
</div>

CSS

img{
  display: none;
  width: 300px;
}
.active{
  display: inline;
}
span{
  cursor: pointer;
  border: solid 1px;
  display: inline-block;
  padding: 4px;
}

JavaScript

/*

1. Events
		On clicking span [colors]
2. Action
		Show currosponding image [car]

*/

function showCarOne(){
  var carTwo = document.getElementById("car-2");
  carTwo.classList.remove('active');
  var carOne = document.getElementById("car-1");
  carOne.classList.add('active');
}

function showCarTwo(){
  var carOne = document.getElementById("car-1");
  carOne.classList.remove('active');
  var carTwo = document.getElementById("car-2");
  carTwo.classList.add('active');
}

/* Select an element */
var elementOne = document.getElementById("color-1");
var elementTwo = document.getElementById("color-2");

/* Add an event for an element */
elementOne.addEventListener('click', showCarOne);
elementTwo.addEventListener('click', showCarTwo);