Как запилить табы не в одном div`е?

Question

[Heorhii]

Всем ку. Нужно запилить самые обычные табы, только в разных div`ах. Не совсем понимаю как это сделать, поскольку инпуты, лейблы и дивы с контентом должны находится под одним. Оторвать не получилось, разместить в разных дивах инпуты и контент отдельно - перестает работать. С input, label в sidebar проблем нет. Но стоит только контент поместить в content и уже ничего не отображается.. Может с кодом косяк? Буду благодарен за любую помощь

/* tabs */
div.tab-frame input {
  display: none;
}
div.tab-frame label {
  display: block;
  padding: 5px 10px;
  cursor: pointer
}
div.tab-frame input:checked + label {
  background: #0073aa;
  color: white;
  cursor: default
}
div.tab-frame div.tab {
  display: none;
  padding: 5px 10px;
}
div.tab-frame input:nth-of-type(1):checked ~ .tab:nth-of-type(1),
div.tab-frame input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
div.tab-frame input:nth-of-type(3):checked ~ .tab:nth-of-type(3) {
  display: block;
}
/* end tabs*/

.sidebar{
  text-align: center;
  position: fixed;
  float: left;
  height: 100%;
  width: 20%;
  color: #fff;
  background: #23282d;
}
.content{
  position: absolute;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 21%;
  margin-bottom: 1%;
  padding: 10px;
}

Answer 1

[Антон Иванов]

Вы о чем? Каждый таб и так уже отдельный див. См. Bootstrap Tabs

Comments

[Heorhii]

В случае если что либо с этих элементов находится за пределами tab-frame, то оно работать не будет. На примере ниже первый таб отобразится, а второй - нет

<div class="tab-frame">
  <input type="radio" checked name="tab" id="tab1">
  <label for="tab1">tab1</label>
  <input type="radio" name="tab" id="tab2">
  <label for="tab2">tab2</label>
  
  <div class="tab">sample content 1</div>
 </div>
 <div class="tab">sample content 2</div>

[Антон Иванов]

Почему у вас инпуты и лейблы вне таба? Почему второй таб у вас вне контейнера tab-frame? Посмотрите как сделано это у бутстрапа. Что за велосипед вы сочиняете?

[Heorhii]

Антон: Просто мой велик на css