Just Create Tabs Using HTML and CSS - No JS Required

In this video, we’ll be learn how to create tabs using just HTML and CSS—no JavaScript needed! Discover how to use radio buttons and labels to organize your content efficiently while enhancing user experience. Whether you’re new to web development or looking to simplify your code, I’ll walk you through the entire process. You’ll learn how to create tabs that not only look amazing but work seamlessly across devices.

*Source Code For Tabs With HTML CSS*

Google Fonts

Stay connected!

Join this channel to get access to perks:

[codzsword]

Hit that subscribe button if you’re reading this comment while watching the tutorial—just kidding!🤣 But seriously, yes, you can create a fully functional tab behavior without using JavaScript.

The main reason behind this tutorial is to show how powerful and versatile HTML and CSS can be, even for features often thought to require JavaScript.
Source code: 👇🏻
❇index.html
<section>
<!-- Radio buttons -->
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab2">Tab 2</label>


<input type="radio" id="tab2" name="tabs">
<label for="tab1">Tab 1</label>

<input type="radio" id="tab3" name="tabs">
<label for="tab3">Tab 3</label>
<!-- Content -->
<div class="tab-content" id="content1">
<h2>Content for Tab 1</h2>
<p>This is the content for the first tab.</p>
</div>
<div class="tab-content" id="content2">
<h2>Content for Tab 2</h2>
<p>This is the content for the second tab.</p>
</div>
<div class="tab-content" id="content3">
<h2>Content for Tab 3</h2>
<p>This is the content for the third tab.</p>
</div>
</section>
❇style.css
section {
max-width: 1000px;
width: 100%;
}

input[type="radio"] {
display: none;
}

label {
padding: 10px 45px;
background-color: #d5d5d5;
border-radius: 5px;
color: #000;
cursor: pointer;
transition: .4s;
}

.tab-content {
display: none;
margin: 20px 0;
}

{
background-color: #4d63dd;
color: #fff;
}

#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3 {
display: block;
}

[marmeadka]

hello, and thank you for this video!
good luck for you and your channel I wish you good progress

[uttpiew]

Do you think it is possible to make a one-page simple website, and using this tab technique to disguise as nav?
Meaning, all the rest of the pages such as [About Us], [Contact Us], bla bla bla... all within the index.html
Do you think it is possible to change the content in <title> when we click on those tabs?

[CloudXpat]

What if the tabs numbers are dynamic in nature