JSFiddle - React, Tailwind, and code Playground

by doctor23

HTML

<div class="tab">
  <button id="11" class="tablinks" onclick="openCart(event, '1')">Москва</button>
  <button class="tablinks" onclick="openCart(event, '2')">Краснодар</button>
  <button class="tablinks" onclick="openCart(event, '3')">Воронеж</button>
  <button id="14" class="tablinks" onclick="openCart(event, '4');">Красноярск и Новосибирск</button>
</div>

<div id="1" class="tabcontent">
  <h3>Москва</h3>
  <p>Москва это столица России.</p>
</div>

<div id="2" class="tabcontent">
  <h3>Краснодар</h3>
  <p>Краснодар это столица Краснодарского края.</p> 
</div>

<div id="3" class="tabcontent">
  <h3>Воронеж</h3>
  <p>Воронеж это столица Воронежской области.</p>
</div>

<div id="4" class="tabcontent">
  <h3>Красноярск</h3>
  <p>Красноярск это столица Красноярского края.</p>
</div>
<div id="5" class="tabcontent">
  <h3>Новосибирск</h3>
  <p>Новосибирск это вторая столица Красноярского края.</p>
</div>

CSS

.tab {
    overflow: hidden;
    border: 1px solid #4CAF50;
    background-color: #C8E6C9;
}


.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}


.tab button:hover {
    background-color: #FFEB3B;
}


.tab button.active {
    background-color: #4CAF50;
    color: #fff;
}


.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #4CAF50;
    border-top: none;
}

.block {
  display: block!important;
}

JavaScript

function openCart(evt, cityName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

var cells = document.getElementById('14');
var city = document.getElementById('5')
for(var i=0; i<cells.length;i++){
    cells[i].addEventListener('click', selectDate);
}

function selectDate(){
    if(this.classList.contains('active')){
        city.classList.add('block');
    }else {
        city.classList.remove('block');
    }
}

/* //дожидаемся полной загрузки страницы
window.onload = function () {

    //получаем идентификатор элемента
    var a = document.getElementById('11');
    
    //вешаем на него событие
    a.onclick = function() {
        //производим какие-то действия
        if (this.innerHTML=='On') this.innerHTML = 'Off';
        else this.innerHTML = 'On';
        //предотвращаем переход по ссылке href
        return false;
    }
} */