I have set up my Radio buttons with corresponding content to be displayed when clicked. I want to automatically pre-select the tab button based on the current day.
For example, if today is Sunday, the page should load showing the contents for Sunday. If it's Tuesday, then the contents of Tuesday should be displayed upon page load.
Below is the code snippet:
@import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
margin: 0;
padding: 0;
}
body {
padding: 50px;
background: #E5E4E2;
}
.tabinator {
background: #fff;
padding: 15px;
font-family: Open Sans;
}
.tabinator input {
display: none;
}
.tabinator label {
box-sizing: border-box;
display: inline-block;
padding: 15px 25px;
color: #ccc;
margin-bottom: -1px;
margin-left: -1px;
}
.tabinator label:before {
content: '';
display: block;
width: 100%;
height: 15px;
background-color: #fff;
position: absolute;
bottom: -11px;
left: 0;
z-index: 10;
}
.tabinator label:hover {
color: #888;
cursor: pointer;
}
.tabinator input:checked+label {
position: relative;
color: #000;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
}
.tabinator input:checked+label:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
#content1,
#content2,
#content3,
#content4,
#content5,
#content6,
#content7 {
display: none;
border-top: 1px solid #bbb;
padding: 15px;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4,
#tab5:checked~#content5,
#tab6:checked~#content6,
#tab7:checked~#content7 {
display: block;
box-shadow: 0 0 15px #939393;
}<div class="tabinator">
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">Sunday</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">Monday</label>
<input type="radio" id="tab3" name="tabs">
<label for="tab3">Tuesday</label>
<input type="radio" id="tab4" name="tabs">
<label for="tab4">Wednesday</label>
<input type="radio" id="tab5" name="tabs">
<label for="tab5">Thursday</label>
<input type="radio" id="tab6" name="tabs">
<label for="tab6">Friday</label>
<input type="radio" id="tab7" name="tabs">
<label for="tab7">Saturday</label>
<div id="content1">
<p>
This is Sunday
</p>
</div>
<div id="content2">
<p>This is Monday
</p>
</div>
<div id="content3">
<p>This is Tuesday
</p>
</div>
<div id="content4">
<p>This is Wednesday
</p>
</div>
<div id="content5">
<p>This is Thursday
</p>
</div>
<div id="content6">
<p>
This is Friday
</p>
</div>
<div id="content7">
<p>
This is Saturday
</p>
</div>
</div>