Multiple tabs on a page - HTML CSS - html

Question

I have the following code: Link
The problem is that the tabs are not active at the same time, when one is
active the other is disabled and I do not know how to make it work. I have
only used HTML and CSS
What I want is that both are active in tab 1 and that we keep active even
though we have the different tabs because my idea is to add more div with
tabs. I leave a link to CodePen and also insert the code here.
.tabs {
display: flex;
flex-wrap: wrap;
}
.tabs label {
order: 1;
display: block;
padding: 1rem 2rem;
cursor: pointer;
background: #90CAF9;
font-weight: bold;
transition: background ease 0.2s;
}
.tabs .tab {
order: 99;
flex-grow: 1;
width: 100%;
display: none;
padding: 1rem;
background: #fff;
}
.tabs input[type="radio"] {
display: none;
}
.tabs input[type="radio"]:checked + label {
background: #fff;
}
.tabs input[type="radio"]:checked + label + .tab {
display: block;
}
<div class="tabs">
<input type="radio" name="tab" id="tabone" checked="checked">
<label for="tabone">Tab One</label>
<div class="tab">
<h1>Tab One Content</h1>
</div>
<input type="radio" name="tab" id="tabtwo">
<label for="tabtwo">Tab Two</label>
<div class="tab">
<h1>Tab Two Content</h1>
</div>
<input type="radio" name="tab" id="tabthree">
<label for="tabthree">Tab Three</label>
<div class="tab">
<h1>Tab Three Content</h1>
</div>
</div>
<br><br><br>
<div class="tabs">
<input type="radio" name="tab" id="tabfour" checked="checked">
<label for="tabfour">Tab One</label>
<div class="tab">
<h1>Tab One Content</h1>
</div>
<input type="radio" name="tab" id="tabfive">
<label for="tabfive">Tab Two</label>
<div class="tab">
<h1>Tab Two Content</h1>
</div>
<input type="radio" name="tab" id="tabsix">
<label for="tabsix">Tab Three</label>
<div class="tab">
<h1>Tab Three Content</h1>
</div>
</div>

Answer 1

<div class="tabs">
<input type="radio" name="tab2" id="tabfour" checked="checked">
<label for="tabfour">Tab One</label>
<div class="tab">
<h1>Tab One Content</h1>
</div>
<input type="radio" name="tab2" id="tabfive">
<label for="tabfive">Tab Two</label>
<div class="tab">
<h1>Tab Two Content</h1>
</div>
<input type="radio" name="tab2" id="tabsix">
<label for="tabsix">Tab Three</label>
<div class="tab">
<h1>Tab Three Content</h1>
</div>
</div>
For the second section, add a different value to the name attribute for each set of radio buttons. What you were doing before was adding checked to two buttons in the same set of radio buttons.

Answer 2

Not 100% sure I understand the question, but it seems to me that you just need to use a different value for the name attribute in each separate tabset.

Answer 3

It seems you want to make many tab groups work (one is open others are close) independently from each other.
Add a different value of name attribute for each set of tabs such that each set will work as a unit where if one is opened other tabs would be closed.
In the example you have given, all the radios along the side of tab inside the first tab could have value of name attribute as tab1 and other radios under second tab-group could have tab2.
PS: radio button's name attribute allows only one of same name radio buttons to be checked.

Answer 4

Here is the full solution working with two panels.
.tabs {
display: flex;
flex-wrap: wrap;
}
.tabs label {
order: 1;
display: block;
padding: 1rem 2rem;
cursor: pointer;
background: #90CAF9;
font-weight: bold;
transition: background ease 0.2s;
}
.tabs [class^="tab"] {
order: 99;
flex-grow: 1;
width: 100%;
display: none;
padding: 1rem;
background: #fff;
}
.tabs input[type="radio"] {
display: none;
}
.tabs input[type="radio"]:checked + label {
background: #fff;
}
.tabs input[type="radio"]:checked + label + [class^="tab"] {
display: block;
}
<div class="tabs">
<input type="radio" name="tab" id="tabone" checked="checked">
<label for="tabone">Tab One</label>
<div class="tab">
<h1>Tab One Content (1)</h1>
</div>
<input type="radio" name="tab" id="tabtwo">
<label for="tabtwo">Tab Two</label>
<div class="tab">
<h1>Tab Two Content (1)</h1>
</div>
<input type="radio" name="tab" id="tabthree">
<label for="tabthree">Tab Three</label>
<div class="tab">
<h1>Tab Three Content (1)</h1>
</div>
</div>
<div class="tabs">
<input type="radio" name="tab2" id="tabfour" checked="checked">
<label for="tabfour">Tab One</label>
<div class="tab2">
<h1>Tab One Content (2)</h1>
</div>
<input type="radio" name="tab2" id="tabfive">
<label for="tabfive">Tab Two</label>
<div class="tab2">
<h1>Tab Two Content (2)</h1>
</div>
<input type="radio" name="tab2" id="tabsix">
<label for="tabsix">Tab Three</label>
<div class="tab2">
<h1>Tab Three Content (2)</h1>
</div>
</div>