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 активных уже и так пока все не нажму все станут активными