Frontend. Как реализовать блок? [закрыт]

$('.tab .tab-selector .item').on('click', function(){ 
  if(!$(this).hasClass('active')) { // Определяем, что нажатая вкладка НЕ является активной. 
    let thisIndex = $(this).index(); // Определяем какая по счёту кнопка нажата. 
    // "перевешиваем" класс active 
    $('.tab-selector .item.active').removeClass('active'); 
    $(this).addClass('active'); 
    // Далее определяем какой слайд будет равен переменной, в которой содержится индекс нажатой кнопки. 
    let thisSlide = $('.tab .tab-content .slide').eq(thisIndex); // Запишем в переменную 
    // "перевешаем" класс active и слайдам 
    $('.tab-content .slide.active').removeClass('active'); 
    thisSlide.addClass('active'); 
  } 
});

.tab {width: 360px;} 
 
.tab-selector {display: block; width: 100%; height: 40px; font-size: 0; margin-bottom: 20px;} 
.tab-selector .item {display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border: 2px solid #000; color: #000; box-sizing: border-box; cursor: pointer; position: relative; margin-right: 40px; font-size: 15px;} 
.tab-selector .item::before {content: '•••••'; display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; position: absolute; right: -42px; 
top: -2px; color: red; letter-spacing: 2px; pointer-events: none;} 
.tab-selector .item:last-child {margin-right: 0;} 
.tab-selector .item:last-child::before {display: none;} 
.tab-selector .item.active {border-color: red; color: red;} 
.tab-selector .item:hover {border-color: red;} 
 
 
.tab-content {display: block; width: 100%;} 
.tab-content .slide {display: none; width: 100%;} 
.tab-content .slide.active {display: block;} 
 
.slide::after {content: ''; display: block; clear: both;} 
.slide .left, .slide .right {display: inline-block; width: 50%; float: left;} 
 
.slide .left h2, .slide .left p {display: block; padding: 0; margin: 0;} 
.slide .left h2::after {content: ''; display: block; width: 40%; height: 4px; background: red; margin: 5px 0;} 
 
.slide .right img {width: 100%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
 
<div class="tab"> 
  <div class="tab-selector"> 
    <div class="item active">1</div> 
    <div class="item">2</div> 
    <div class="item">3</div> 
    <div class="item">4</div> 
    <div class="item">5</div> 
  </div> 
  <div class="tab-content"> 
    <div class="slide active"> 
      <div class="left"> 
        <h2>Заголовок 1</h2> 
        <p>Описание</p> 
      </div> 
      <div class="right"> 
        <img src="https://via.placeholder.com/400x250?text=Slide 1"> 
      </div> 
    </div> 
    <div class="slide"> 
      <div class="left"> 
        <h2>Заголовок 2</h2> 
        <p>Описание</p> 
      </div> 
      <div class="right"> 
        <img src="https://via.placeholder.com/400x250?text=Slide 2"> 
      </div> 
    </div> 
    <div class="slide"> 
      <div class="left"> 
        <h2>Заголовок 3</h2> 
        <p>Описание</p> 
      </div> 
      <div class="right"> 
        <img src="https://via.placeholder.com/400x250?text=Slide 3"> 
      </div> 
    </div> 
    <div class="slide"> 
      <div class="left"> 
        <h2>Заголовок 4</h2> 
        <p>Описание</p> 
      </div> 
      <div class="right"> 
        <img src="https://via.placeholder.com/400x250?text=Slide 4"> 
      </div> 
    </div> 
    <div class="slide"> 
      <div class="left"> 
        <h2>Заголовок 5</h2> 
        <p>Описание</p> 
      </div> 
      <div class="right"> 
        <img src="https://via.placeholder.com/400x250?text=Slide 5"> 
      </div> 
    </div> 
  </div> 
</div>

function openCity(evt, cityName) { 
  var i, tabcontent, tablinks; 
  tabcontent = document.getElementsByClassName("tabcontent"); 
  for (i = 0; i < tabcontent.length; i++) { 
    tabcontent[i].style.display = "none"; 
  } 
  tablinks = document.getElementsByClassName("tablinks"); 
  for (i = 0; i < tablinks.length; i++) { 
    tablinks[i].className = tablinks[i].className.replace(" active", ""); 
  } 
  document.getElementById(cityName).style.display = "block"; 
  evt.currentTarget.className += " active"; 
} 
 
// Get the element with id="defaultOpen" and click on it 
document.getElementById("defaultOpen").click();

body {font-family: Arial;} 
 
/* Style the tab */ 
.tab { 
  overflow: hidden; 
  border: 1px solid #ccc; 
  background-color: #f1f1f1; 
} 
 
/* Style the buttons inside the tab */ 
.tab button { 
  background-color: inherit; 
  float: left; 
  border: none; 
  outline: none; 
  cursor: pointer; 
  padding: 14px 16px; 
  transition: 0.3s; 
  font-size: 17px; 
} 
 
/* Change background color of buttons on hover */ 
.tab button:hover { 
  background-color: #ddd; 
} 
 
/* Create an active/current tablink class */ 
.tab button.active { 
  background-color: #ccc; 
} 
 
/* Style the tab content */ 
.tabcontent { 
  display: none; 
  padding: 6px 12px; 
  border: 1px solid #ccc; 
  border-top: none; 
} 
 
/* Style the close button */ 
.topright { 
  float: right; 
  cursor: pointer; 
  font-size: 28px; 
} 
 
.topright:hover {color: red;}

<h2>Tabs</h2> 
<p>Click on the x button in the top right corner to close the current tab:</p> 
 
<div class="tab"> 
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button> 
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> 
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> 
</div> 
 
<div id="London" class="tabcontent"> 
  <span onclick="this.parentElement.style.display='none'" class="topright">&times</span> 
  <h3>London</h3> 
  <p>London is the capital city of England.</p> 
</div> 
 
<div id="Paris" class="tabcontent"> 
  <span onclick="this.parentElement.style.display='none'" class="topright">&times</span> 
  <h3>Paris</h3> 
  <p>Paris is the capital of France.</p>  
</div> 
 
<div id="Tokyo" class="tabcontent"> 
  <span onclick="this.parentElement.style.display='none'" class="topright">&times</span> 
  <h3>Tokyo</h3> 
  <p>Tokyo is the capital of Japan.</p> 
</div>