Creating tabs in a webpage can significantly enhance its organization and user experience by compartmentalizing information into easily navigable sections. Interestingly, one effective but lesser-known method to accomplish this is by using radio inputs coupled with HTML and CSS.
Step1: Simple Tabs with Radio Buttons
This code snippet uses radio inputs and labels to create a tabbed interface without JavaScript, where selecting a tab label displays its corresponding content while hiding others.
<div id="page-wrap"> <input type="radio" name="tab" id="tab1" checked> <label class="" for="tab1">1</label> <input type="radio" name="tab" id="tab2"> <label class="" for="tab2">2</label> <input type="radio" name="tab" id="tab3"> <label class="" for="tab3">3</label> <div id="tab1tab" class="tab-content">This is tab 1!</div> <div id="tab2tab" class="tab-content">Whoah! Tab 2 here!</div> <div id="tab3tab" class="tab-content">Here's a tertiary tab!</div> </div>
Step2: Styling the Tabbed Interface
This code applies visual styles to the basic tabbed interface. It creates a shadowed container, styles the tab buttons and content areas, and animates the content expansion on tab selection.
*,*:after,*:before{box-sizing:border-box;}
#page-wrap {
width: 450px;
margin: 40px auto;
box-shadow: 0 3px 5px #666;
overflow: visible;
float: left;
background: #ebebeb;
border-radius: 5px;
position: relative;
z-index: 1;
}
#page-wrap:after,
#page-wrap:before {
content: "";
width: 90%;
position: absolute;
height: 20px;
box-shadow: 0 20px 20px #000;
bottom: 25px;
transform: rotate(5deg);
z-index: -1;
right: 5px
}
#page-wrap:after {
transform: rotate(-5deg);
left: 5px;
}
input[type="radio"] {
position: absolute;
left: -200%;
}
label {
display: block;
border-radius: 5px 5px 0 0;
border: 1px solid #999;
width: 80px;
height: 40px;
float: left;
margin-right: 2px;
text-align: center;
line-height: 40px;
color: #fff;
font-family: arial;
font-weight: bold;
cursor: pointer;
margin-bottom:-1px;
background:#912929;
}
.tab-content {
color: #fff;
background:#c8c529;
font-family: arial;
font-weight: bold;
padding: 0 10px;
width: 100%;
float: left;
height: 0em;
overflow: hidden;
transition: 0.5s;
}
input[type="radio"]:checked+label{background:#888}
#tab1:checked~#tab1tab {
height: 150px;
padding: 10px;
}
#tab2:checked~#tab2tab {
height: 150px;
padding: 10px;
}
#tab3:checked~#tab3tab {
height: 150px;
padding: 10px;
}Radio Input Based Tabs: Step by Step Tutorial Demo
Using radio inputs to create tabs is a simple yet effective technique, ideal for adding tab functionality to your web pages without JavaScript. By following the steps outlined above, you can implement this method quickly, offering your users a neat way to navigate through different sections of content.
