JSFiddle - React, Tailwind, and code Playground

by velmurugansp

HTML

<div id="colors">
  <span>Color 1</span>
  <span>Color 2</span>
  <span>Color 3</span>
  <span>Color 4</span>
</div>
<div id="cars">
  <img src="https://stimg.cardekho.com/images/car-images/930x620/Maruti/Maruti-Swift/6324/Midnight-Blue_15234b.jpg?tr=w-898,e-sharpen" />
  <img src="https://stimg.cardekho.com/images/car-images/930x620/Maruti/Maruti-Swift/6324/Prime-Lucent-OrangeN_b52716.jpg?tr=w-898,e-sharpen" />
  <img src="https://stimg.cardekho.com/images/car-images/930x620/Maruti/Maruti-Swift/6324/Metallic-Silky-SilverN_6f6f6e.jpg?tr=w-898,e-sharpen" />
  <img 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;
}
.highlight{
  box-shadow: #000 0 0 5px;
}
.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]

Flow:
- Select all span
- Bind Click event for each span
	- Find index of span
  - Hide active image
  - Show correspoinding image based on span index value
	- Highlight current span alone
*/

var spanElements = document.getElementById("colors").children;
var imageElements = document.getElementById("cars").children;

for (var i = 0; i< spanElements.length; i++){

	spanElements[i].addEventListener('click', function(){
  	
    // Find index of span
    var nodes = Array.prototype.slice.call(spanElements);
    var index = spanElements.indexOf(this);
		
    // Hide active image
    var activeImage = document.getElementsByClassName('active')[0];
    
    if(activeImage != undefined){
    	activeImage.classList.remove('active');
    }
    
    //Show correspoinding image based on span index value
    imageElements[index].classList.add('active');
    
    var activeSpan = document.getElementsByClassName('highlight')[0];
    
    //Highlight current span alone
    if(activeSpan != undefined){
    	activeSpan.classList.remove('highlight');
    }

		this.classList.add('highlight');

  });
  
}

//Default Image
spanElements[3].classList.add('highlight');
imageElements[3].classList.add('active');