TECH
Vol.86
Y.M.
Simple Tab Switching Implementation
Basic Implementation
We’ll implement tab-switching functionality using both CSS + JavaScript and CSS-only approaches.
Implementing Tabs with CSS Only
panel1
panel2
panel3
<div class="tab_wrap"> <input id="tab1" type="radio" name="tab_btn" checked> <input id="tab2" type="radio" name="tab_btn"> <input id="tab3" type="radio" name="tab_btn">
<div class="tab_area">
<label class="tab1_label" for="tab1">tab1</label>
<label class="tab2_label" for="tab2">tab2</label>
<label class="tab3_label" for="tab3">tab3</label>
</div>
<div class="panel_area">
<div id="panel1" class="tab_panel">
<p>panel1</p>
</div>
<div id="panel2" class="tab_panel">
<p>panel2</p>
</div>
<div id="panel3" class="tab_panel">
<p>panel3</p>
</div>
</div>
When implementing tabs with CSS only, radio buttons are used to control the content switching.
To link the radio buttons with the tab elements (labels in this sample),
specify the radio button’s id using the for attribute on the corresponding element.
..tab_wrap{width:500px; margin:80px auto;} input[type="radio"]{display:none;} .tab_area{font-size:0; margin:0 10px;} .tab_area label{width:150px; margin:0 5px; display:inline-block; padding:12px 0; color:#999; background:#ddd; text-align:center; font-size:13px; cursor:pointer; transition:ease 0.2s opacity;} .tab_area label:hover{opacity:0.5;} .panel_area{background:#fff;} .tab_panel{width:100%; padding:80px 0; display:none;} .tab_panel p{font-size:14px; letter-spacing:1px; text-align:center;}
#tab1:checked ~ .tab_area .tab1_label{background:#fff; color:#000;}
#tab1:checked ~ .panel_area #panel1{display:block;}
#tab2:checked ~ .tab_area .tab2_label{background:#fff; color:#000;}
#tab2:checked ~ .panel_area #panel2{display:block;}
#tab3:checked ~ .tab_area .tab3_label{background:#fff; color:#000;}
#tab3:checked ~ .panel_area #panel3{display:block;}
About the “~” combinator
It is used to target sibling elements that share the same parent element.
Unlike the “+” combinator, which only targets the immediately following sibling element, the “~” combinator can apply styles to any sibling elements that come after the specified element.
Also, when implementing tabs with CSS only, styles for the selected tab must be specified individually.
If there are many tabs, the code can become lengthy, but using Sass makes it easy to handle through loop processing.
Loop processing using Sass @while and interpolation
$i:1; $length:3; @while $i <= $length{ #tab#{$i}:checked{ ~ .tabarea1 .tab#{$i}_label{background:#fff; color:#000;} ~ .panel_area #panel#{$i}{display:block;} } $i:$i + 1; } Implementing Tabs with CSS and JavaScript
panel1
panel2
panel3
.tab_wrap{width:500px; margin:80px auto;} .tab_area{font-size:0; margin:0 10px;} .tab_area label{width:150px; margin:0 5px; display:inline-block; padding:12px 0; color:#999; background:#ddd; text-align:center; font-size:13px; cursor:pointer; transition:ease 0.2s opacity;} .tab_area label:hover{opacity:0.5;} .panel_area{background:#fff;} .tab_panel{width:100%; padding:80px 0; display:none;} .tab_panel p{font-size:14px; letter-spacing:1px; text-align:center;}
.tab_area label.active{background:#fff; color:#000;}
.tab_panel.active{display:block;}
$(".tab_label").on("click",function(){ var $th = $(this).index(); $(".tab_label").removeClass("active"); $(".tab_panel").removeClass("active"); $(this).addClass("active"); $(".tab_panel").eq($th).addClass("active"); }); The selected-state design is handled with CSS, while JavaScript controls adding and removing classes.
Although jQuery provides toggleClass, it is not used here because it became deprecated in jQuery 3 and later.
Changing the Design with border-radius
When creating layouts and designs, various properties are usually combined together.
This time, however, we’ll introduce ways to create visually rich tab designs using only border-radius, which rounds the corners of box elements.
Rounded corners are applied to parts of the tabs and content areas, creating a softer impression.
border and border-radius are combined to create borders that resemble hand-drawn lines.
The currently selected tab is styled as a perfect circle, while the content area uses larger rounded corners to create a cute and playful design.
Adding Animation
Next, we’ll implement animations for when tabs are clicked and the content changes.
Even simple animations make the transition feel clearer and more visually engaging.
Content Fades When Switching
CSS Implementation
@keyframes tabAnim{ 0%{opacity:0;} 100%{opacity:1;} } By applying a fade animation, the content transitions smoothly when tabs are switched.
With CSS + JavaScript implementations, JavaScript simply controls the addition and removal of classes, while CSS handles the animation itself.
Content Slides Down from the Top
CSS Implementation
@keyframes tabAnim{ 0%{top:-100%;} 100%{top:0;} } Using position control and keyframe animation, content can slide into view from above when switching tabs.
With the CSS + JavaScript implementation, the active panel is reordered and animated dynamically using JavaScript.
Making the Selected Tab Float Like a Speech Bubble
CSS-only implementation
.tab_area label:before{ content:""; width:0; height:0; border:75px solid transparent; border-top:15px solid #ddd; } By using pseudo-elements and transforms, the active tab appears to float upward and take on the shape of a speech bubble.
Summary
What did you think?
This time, we focused on keeping the implementations simple, introducing relatively straightforward designs and animations.
Hopefully this article showed that convenient tab-switching functionality can be implemented quite easily.
CSS and JavaScript still offer many more properties and features,
so by making full use of them, you can create even richer and more user-friendly tab-switching content.
RECENT POSTS
Vol.203
What Is Design Management
Vol.202
Why Hiring No Longer Works— Redesigning Organizations and Decisions for an Uncertain Age
Vol.201
How to Choose a Branding Agency: 5 Criteria to Avoid Failure
Vol.200
Design Management: A Practical Guide for SMEs and Startups to Drive Real Results
Vol.199
How to Rebuild Brand Competitiveness: A Practical Guide to Brand Management for SMEs
Vol.198
From parent–child bonds to community: The future of education that nurtures diversity and designs relationships
