Simple HTML CSS Tabs without JavaScript

Simple HTML/CSS Tabs without JavaScript

by

In this tutorial, we are going to create some useful and very simple CSS tabs without using JavaScript. Generally on internet you will find the resources that have developed Tabs using JavaScript, but here you will find the code using a different technique where we have only used the CSS to create tabs.

It’s always important to show our content on the web page in a very readable and eye-catching format. When we have lots of data to show, it’s always recommended to create tabs or accordions so that our content doesn’t clutter and make our web page look so shabby.

Table of Contents

CSS Tabs Examples

  • Ecommerce Stores: Product description, Usage Information and Shipping Information.
  • Different Versions: Can be used to show Lyrics in multiple languages.
  • Coding Websites: To show HTML, CSS & JavaScript in different tabs.
  • Tabbed Components: Login/Sign Up Screen Toggle.

By using these tabs we can save a lot of space and more information and content can be shown to the user and it also enhances the user experience for most of the use cases.

Let’s start coding now and create this simple project. You can use VS code or code pen to write the codes.

HTML

<div class="tab-wrap">
    <input type="radio" id="tab1" name="tabGroup1" class="tab" checked>
    <label for="tab1">First</label>
    
    <input type="radio" id="tab2" name="tabGroup1" class="tab">
    <label for="tab2">Second</label>
    
    <input type="radio" id="tab3" name="tabGroup1" class="tab">
    <label for="tab3">Third</label>
    
    <div class="tab__content">
        First Tab
    </div>
    <div class="tab__content">
      Second Tab    
    </div>
    <div class="tab__content">
      Third Tab
    </div>
</div>

CSS

.tab-wrap {
  -webkit-transition: 0.3s box-shadow ease;
  transition: 0.3s box-shadow ease;
  border-radius: 6px;
  max-width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  list-style: none;
  background-color: #fff;
  margin: 40px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
  opacity: 1;
  -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
  transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease;
  position: relative;
  top: 0;
  z-index: 100;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  text-shadow: 0 0 0;
}

.tab + label {
  box-shadow: 0 -1px 0 #eee inset;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: #333;
  -webkit-box-flex: 3;
      -ms-flex-positive: 3;
          flex-grow: 3;
  text-align: center;
  background-color: #f2f2f2;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-align: center;
  -webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;
  transition: 0.3s background-color ease, 0.3s box-shadow ease;
  height: 50px;
  box-sizing: border-box;
  padding: 15px;
}

.tab__content {
  padding: 10px 25px;
  background-color: transparent;
  position: absolute;
  width: 100%;
  z-index: -1;
  opacity: 0;
  left: 0;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  border-radius: 6px;
}

Implement the code in your project and it will work as expected. Feel free to comment down your queries and doubts. Happy learning!

Credits: CodeConvey

Leave a Comment