I have two sets of css tabs in one page with the same titles & labels but different contents, both first tab has been "checked" in css, however it is behaving as if two sets of tabs only have one "checked" property. I'd like both sets to each have a checked tab all the time. Is that possible using only css? Here's a copy of what I have so far..
html
<div class="tabs m-tab">
<input id="about-m" type="radio" name="tabs" checked="checked">
<label for="about-m">About Me</label>
<input id="profile-m" type="radio" name="tabs">
<label for="profile-m">Profile</label>
<input id="typical-m" type="radio" name="tabs">
<label for="typical-m">Typical Day</label>
<div class="tab-info" id="m-about">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do ore magna aliqua labo ris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="tab-info" id="m-profile">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua labo ris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="tab-info" id="m-typical">
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua labo ris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="tabs p-tab">
<input id="about-p" type="radio" name="tabs" checked="checked">
<label for="about-p">About Me</label>
<input id="profile-p" type="radio" name="tabs">
<label for="profile-p">Profile</label>
<input id="typical-p" type="radio" name="tabs">
<label for="typical-p">Typical Day</label>
<div class="tab-info" id="p-about">
<p>Hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</div>
<div class="tab-info" id="p-profile">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tab-info" id="p-typical">
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
css
.m-tab, .p-tab {
display:inline-block;
width:400px;
height:450px;
}
.tab-info {
display:none;
padding:10px;
border-top:1px solid #abc;
}
.tabs input {
display:none;
}
.tabs label {
display:inline-block;
margin:0 0 -1px;
padding:15px 25px;
font-weight:600;
text-align:center;
color: rgb(134, 206, 155);
border: 1px solid transparent;
}
.tabs label:hover {
color:rgb(47, 187, 89);
cursor:pointer;
}
.tabs input:checked + label {
color:rgb(2, 163, 51);
border:1px solid #abc;
border-top:3px solid rgb(27, 190, 76);
border-bottom:1px solid #fff;
}
#about-m:checked ~ #m-about,
#profile-m:checked ~ #m-profile,
#typical-m:checked ~ #m-typical,
#about-p:checked ~ #p-about,
#profile-p:checked ~ #p-profile,
#typical-p:checked ~ #p-typical {
display: block;
}
copy to my codepen: https://codepen.io/tinqqx3/pen/MZNKZg many thanks in advance!
the only problem was that you have put all radios in same group