Как сделать, чтобы контент табов отображался?

Question

[ishimskayamahorka14]

Как сделать, чтобы содержимое табов отображалось при нажатии, когда оно вне блока с табом?
Это уже отредактированный код, который не работает, если они снаружи , на контенте указан display: none;
Через css display: none; деактивируется при нажатии кодом css #link5:checked ~ #tab1 {display: block;}

.rower2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.fix-item2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #c9c9c9;
    height: 73px;
    border-radius: 6px;
    margin: 0 auto 10px auto;
    position: relative;
    width: 46%;
}
.linkinp {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    margin: 0;
    opacity: 0;
}
.link {
    width: 100px;
    display: inline-block;
    text-align: center;
    padding: 3px 0;
    background-color: #ddd;
    transition: 0.2s;
    border: 1px solid #333;
    cursor: pointer;
}
.tab2 {
    height: 60px;
    padding-left: 5px;
    background: #dadada;
    width: 100%;
    position: absolute;
}
.tab, .tab2 {
    display: none;
}
input[type="checkbox"]:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
.linkinp:checked + .link {
  background-color: #666; color: #fff; transform: translateY(1px);
}

<div class="rower2">
	<div class="fix-item2">
		<input id="link5" class="linkinp" name="link" type="checkbox">
		<label for="link5" class="link">Первый</label>
	</div>
	<div class="fix-item2">
		<input id="link6" class="linkinp" name="link" type="checkbox">
		<label for="link6" class="link">Второй</label>
	</div>
	<div class="fix-item2">
		<input id="link7" class="linkinp" name="link" type="checkbox">
		<label for="link7" class="link">Третий</label>
	</div>
	<div class="fix-item2">
		<input id="link8" class="linkinp" name="link" type="checkbox">
		<label for="link8" class="link">Третий</label>
	</div>
</div>
<div class="nav-block">
    <div id="tab1" class="tab2">Вкладка - 1</div>
    <div id="tab2" class="tab2">Вкладка - 2</div>
    <div id="tab3" class="tab2">Вкладка - 3</div>
    <div id="tab4" class="tab2">Вкладка - 4</div>
</div>

Answer 1

[Алексей]

При помощи JS средствами CSS никак

Comments

[ishimskayamahorka14]

Пожалуйста, подскажите как сделать рабочей данную конструкцию с JS

[Алексей]

Например так:

const checkbox = document.getElementById('link5')

checkbox.addEventListener('change', (event) => {
  if (event.target.checked) {
    document.getElementById('tab1').style.display = 'block';
  } else {
    document.getElementById('tab1').style.display = 'none';
  }
})

Остальные блоки аналогично.

[ishimskayamahorka14]

Алексей, большое спасибо! А можно как-то автоматизировать, чтобы этот длинный код не прописывать к каждому?
Например, упомянуть классы через запятую?

[Игорь Борисов]

без знаков препинания ваш коммент вводит в заблуждение