2 html блока не хотят работать

function openCity(evt, cityn) {
    var i, tabcontents, tablink;
    tabcontents = document.getElementsByClassName("tabcontents");
    for (i = 0; i < tabcontents.length; i++) {
        tabcontents[i].style.display = "none"}
  
    tablink = document.getElementsByClassName("tablink");
    for (i = 0; i < tablink.length; i++) {
        tablink[i].className = tablink[i].className.replace(" active", "");
    }
    document.getElementById(cityn).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen1").click();
* {box-sizing: border-box}
/* вид названий блоков */
.tabs {
    float: left;
    width: 325px;
    height: 400px;
    position: relative;
    z-index: 2;
    margin: 2px 0;
}

/* вид не активного блока */
.tabs button {
    display: block;
    background-color: #F2F4F7;
    color: #0F0924;
    padding: 22px 16px;
    width: 100%;
    border: 2px solid transparent; border-left: solid #282460;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    height:auto;
    padding: 3px 10px 3px ;
    width: 292px;
    clip-path: polygon(92.85% 0%, 100% 50%, 92.85% 100%, 0% 100%, 0 50%, 0% 0%);
    margin: 8px 0 8px;
}

/* вид наведенного блока */
.tabs button:hover {
  background-color: #ddd;
  color: #0F0924;
  height:auto;
  padding: 3px 10px 3px;
  clip-path: polygon(92.85% 0%, 100% 50%, 92.85% 100%, 0% 100%, 0 50%, 0% 0%);
  margin: 8px 0 8px;
}

/* вид активного блок */
.tabs button.active {
  color: #FFFFFF;
  height:auto;
  padding: 3px 10px 3px;
  width: 350px;
  background-color: #0F0924;
  clip-path: polygon(92.85% 0%, 100% 50%, 92.85% 100%, 0% 100%, 0 50%, 0% 0%);
  margin: 8px 0 8px;
  }

/* вид блока контента */
.tabcontents {
   font-size: 22px;
    float: left;
    padding-left:56px;
    margin: 0 0 0px 0;
    width: 786px;
    border-left: none;
    min-height: 650px;
    background-color: #F2F4F7;
    color: #282460;
    z-index: 1;
    position: relative;
    line-height: 30px;
}
#rectangle2 {
  height: 304px;
  width: 413px;
  background-color:#282460;
  position: absolute;
  margin: 370px 712px;
  z-index: 0;
}
.nazs {
    font-family: ProximaNova-Semibold;
  font-size: 20px;
  margin: 0px;
  line-height: 30px;
  padding: 0 0 0 0;
  width: 292px;
}
.soders {
    font-family: ProximaNova-Semibold;
    position: relative;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 15px 0 5px 0;
    }
#molotok2{
    position: absolute;
    z-index:3;
    opacity: 0.5;
    height: 197px;
  margin-top: 443px;margin-left:805px;}
<img id="molotok2" src="http://yuriki/wp-content/uploads/2021/06/gavel_PNG65.png"></img>
<div id="rectangle2"></div>
<div class="tabs">
  <button class="tablink" onclick="openCity(event, 'no1')" id="defaultOpen1"><div class=nazs>Реєстрація бізнесу, внесення змін, ліквідація</div></button>
  <button class="tablink" onclick="openCity(event, 'no2')"><div class=nazs>Комплексне юридичне та бухгалтерське обслуговування «під ключ»</div></button>
  <button class="tablink" onclick="openCity(event, 'no3')"><div class=nazs>Корпоративні спори</div></button>
  <button class="tablink" onclick="openCity(event, 'no4')"><div class=nazs>Податкові спори</div></button>
  <button class="tablink" onclick="openCity(event, 'no5')"><div class=nazs>Господарські спори</div></button>
  <button class="tablink" onclick="openCity(event, 'no6')"><div class=nazs>Трудові спори для бізнесу</div></button>
  <button class="tablink" onclick="openCity(event, 'no7')"><div class=nazs>Супровід угод</div></button>
  </div>

<div id="no1" class="tabcontents">
  <div class="soders">Захист під час досудового розслідування</div>
  <div class="soders">Захист в суді</div>
  <div class="soders">Захист прав та інтересів підозрюваного в кримінальному процесі</div>
  <div class="soders">Захист прав та інтересів свідка</div>
  <div class="soders">Захист прав та інтересів потерпілого;</div>
  <div class="soders">Представництво цивільного позивача в кримінальному процесі</div>
  <div class="soders">Виїзд адвоката на обшук та інші слідчі дії</div>
  <div class="soders">Адвокат у справах щодо примусового застосування заходів медичного або виховного характеру</div>
  </div>
  

<div id="no2" class="tabcontents">
  <div class="soders"></div>
 <div class="soders">Захист під час досудового розслідування</div>
  <div class="soders"></div>
</div>

<div id="no3" class="tabcontents">
  <div class="soders"></div>
 <div class="soders">Захист під час досудового розслідування</div>
  <div class="soders"></div>
</div>

<div id="no4" class="tabcontents">
  <div class="soders"></div>
 <div class="soders">Захист під час досудового розслідування</div>
  <div class="soders"></div>
</div>

<div id="no5" class="tabcontents">
  <div class="soders"></div>
 <div class="soders">Захист під час досудового розслідування</div>
  <div class="soders"></div>
</div>
<div id="no6" class="tabcontents">
  <div class="soders"></div>
 <div class="soders">Захист під час досудового розслідування</div>
  <div class="soders"></div>
</div>
<div id="no7" class="tabcontents">
  <div class="soders"></div>
 <div class="soders">Захист під час досудового розслідування</div>
  <div class="soders"></div>
</div>

два таких похожик кода не хотят совместно работтать, т.е. один из них работает другой - кликаю и 2 активных уже и так пока все не нажму все станут активными


Ответы (0 шт):