JSFiddle - React, Tailwind, and code Playground

by Webov Wev

HTML

<div id="class-1">
  <div class="one">Один</div>
  <div class="two">Два</div>
  <div class="three">Три</div>
  <div class="four">Четыре</div>
</div>

<div id="class-2">
<p class="photo-1">1</p>
<p class="photo-2">2</p>
<p class="photo-3">3</p>
</div>

CSS

#class-1 {
  width: 100%;
}

#class-2 {
  width: 250px;
}

div {
  width: 50px;
  padding: 5px;
  display: inline-block;
  float: left;
}

p {
  width: 50px;
  height: 50px;
  display: inline-block;
  color: #fff;
  background-color: #000;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.white {
  background-color: #fff;
  color: #ff0000;
}

JavaScript

$('.one').click(function() {
  	$('.photo-1').siblings().addClass('hide');
    $('.photo-1').removeClass('hide');
  });
  
  	$('.two').click(function() {
  	$('.photo-2').siblings().addClass('hide');
    $('.photo-2').removeClass('hide');
  });
  
  	$('.three').click(function() {
  	$('.photo-3').siblings().addClass('hide');
    $('.photo-3').removeClass('hide');
  });
  
    $('.four').click(function() {
    $('.photo-1, .photo-2, .photo-3').removeClass('hide');
  });

  $('.one, .two, .three').click(function() {
  	$(this).siblings().removeClass('white');
  });

//