Pure CSS Tabs without JavaScript

This code project demonstrates a technique to create pure CSS tabs without the need for JavaScript. These tabs provide a convenient way to organize and present different sections of content on a web page. The code utilizes HTML radio buttons and labels to control the display of content panels. Each tab is associated with a specific content panel, and clicking on a tab updates the visible panel accordingly.

The tabs are styled using CSS, with transitions and hover effects for enhanced user experience. This approach eliminates the reliance on JavaScript for tab functionality, making it lightweight and efficient. By using this code, you can easily implement tabbed content on your website without any JavaScript dependencies, resulting in a clean and minimalistic design

How to Create Pure CSS Tabs without JavaScript

1. To begin, we need to set up the basic HTML structure for our tabs. We’ll use an unordered list (<ul>) to create the tab navigation and a series of content divs for each tab panel. Each tab will consist of an input radio button and a label.

<ul class="tabs" role="tablist">
    <li>
        <input type="radio" name="tabs" id="tab1" checked />
        <label for="tab1" 
               role="tab" 
               aria-selected="true" 
               aria-controls="panel1" 
               tabindex="0">Description</label>
        <div id="tab-content1" 
             class="tab-content" 
             role="tabpanel" 
             aria-labelledby="description" 
             aria-hidden="false">
          <p>Your Content Goes here...</p>
        </div>
    </li>
  
    <li>
        <input type="radio" name="tabs" id="tab2" />
        <label for="tab2"
               role="tab" 
               aria-selected="false" 
               aria-controls="panel2" 
               tabindex="0">Specification</label>
        <div id="tab-content2" 
             class="tab-content"
             role="tabpanel" 
             aria-labelledby="specification" 
             aria-hidden="true">
          <p>Your Content Goes here...</p>
        </div>
    </li>
</ul>

2. Next, we’ll style our tabs using CSS. We’ll define the appearance of the tabs, including their size, color, and positioning. We’ll also apply transitions and hover effects to enhance the user experience. By utilizing CSS selectors and pseudo-classes, we can control the visibility of the content panels based on the selected tab.

@import url("https://fonts.googleapis.com/css?family=Lato");
* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  padding: 20px;
  text-align: left;
  font-family: Lato;
  color: #fff;
  background: #9b59b6;
}

h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  float: left;
  margin: 20px 0 100px 10px;
}
h1 span {
  font-size: 13px;
  display: block;
  padding-left: 4px;
}

.tabs {
  width: 650px;
  float: none;
  list-style: none;
  position: relative;
  margin: 80px 0 0 10px;
  text-align: left;
}
.tabs li {
  float: left;
  display: block;
}
.tabs input[type="radio"] {
  position: absolute;
  top: 0;
  left: -9999px;
}
.tabs label {
  display: block;
  padding: 14px 21px;
  border-radius: 2px 2px 0 0;
  font-size: 20px;
  font-weight: normal;
  text-transform: uppercase;
  background: #8e44ad;
  cursor: pointer;
  position: relative;
  top: 4px;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.tabs label:hover {
  background: #703688;
}
.tabs .tab-content {
  z-index: 2;
  display: none;
  overflow: hidden;
  width: 100%;
  font-size: 17px;
  line-height: 25px;
  padding: 25px;
  position: absolute;
  top: 53px;
  left: 0;
  background: #612e76;
}
.tabs [id^="tab"]:checked + label {
  top: 0;
  padding-top: 17px;
  background: #612e76;
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
  display: block;
}

p.link {
  clear: both;
  margin: 380px 0 0 15px;
}
p.link a {
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  color: #fff;
  padding: 5px 10px;
  margin: 0 5px;
  background-color: #612e76;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
p.link a:hover {
  background-color: #522764;
}

That’s all! hopefully, you have successfully created pure CSS tabs without JavaScript. If you have any questions or suggestions, feel free to comment below.