Simple CSS Tabs without JavaScript

In this tutorial, I am going to create another set of simple CSS tabs without JavaScript. In our previous article, We have did a experiment with tabs but here I will take a look in different way.

I will also use a different technique to create tabs in this article. Not only this but also the design will be changed, and the animations will be entirely different in this tutorial.

One of the better ways to arrange a respectable amount of content on a site page is to apply tabs. A couple of situations you might find this system uses a lot.

For example, online stores often organize the product description, delivery information and return policy content using horizontal tabs below the product price.

The usage of the tabbed area is very regular more recently. Few websites have their complete layout predicated on tabbed area concept.

In this article, we will look at types of tabbed using CSS and HTML only. Among the method making tab will demand little JavaScript for better user experience but will continue to work fine without JavaScript.

There are many choices available on the web about how to set-up simple navigation tabs. A great deal of these options though uses JavaScript (usually jQuery).

While this must not be a problem whatsoever, in this specific article, I’d like to share one particular method of creating tabs which written in few lines of CSS.

Simple HTML Structure for Tabs

As you can see in below HTML snippet, we are using simple input radio buttons fields and labels for every tab title. Then we are adding the content for every tab in a separate div class name tab__content. Each input radio button has a unique ID, so we can then style it through the CSS.

<div class="tab-wrap">
    <input type="radio" id="tab1" name="tabGroup1" class="tab" checked>
    <label for="tab1">Short</label>
    
    <input type="radio" id="tab2" name="tabGroup1" class="tab">
    <label for="tab2">Medium</label>
    
    <input type="radio" id="tab3" name="tabGroup1" class="tab">
    <label for="tab3">Long</label>
    
    <div class="tab__content">
        TAB ONE CONTENT
    </div>
    <div class="tab__content">
      TAB Two CONTENT
    </div>
    <div class="tab__content">
      TAB THREE CONTENT
    </div>
</div>

Styling Tabs without JavaScript

We added some nice transition, box-shadow and another general style to the wrapper of the tabs.

.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);
}

Each tab will be handled through use of : checked and :nth-of-type CSS3 property.

.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;
}

We will style the label, so it looks nice in design and also adds the transition.

.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;
}

Finally, we need to design the content area of a tab. We will add some padding, background color but the most necessary to add the position to absolute.

.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;
}  

That’s all. I hope you like these simple CSS Tabs that are created without using JavaScript. You can comment below if you have any question related to these CSS tabs.

You Might Be Interested In:

Ashfaq Ahmed is a freelance WordPress developer and owner of codeconvey.com. I developed modern and highly interactive websites. I always focus on improving my development and design skills.

9 thoughts on “Simple CSS Tabs without JavaScript”

  1. I know you have explained here how to make tabs without javascript but I got the styles from the demo page. Thanks!

    • Hi Sumagna Das!
      Yeah! We distribute the downloadable file with each tutorial.
      Enjoy coding, keep visiting us for more awesome pure CSS code snippets.

    • Hi Jacqui!
      Thanks for appreciation, keep visiting us for more excellent posts.

  2. Thank you 1000 times. I’m still just a self-learning rookie so all this JS code was pain in the…. Especially when I was need to add more than 1 block with tabs on the same page. Your example is as simple as brilliant. Thanks again!

    • Hi CrewDK!
      You’re strongly welcome. Keep visiting us for more web design codes & scripts.

  3. Thanks for the info, but I have changed it a little. I found repeating “.tab:checked:nth-of-type(n)” is not optimal, so I found an alternative. You need to put the tab__content div after its selector, then you can use the following selector “.tab:checked + label + .tab-content” which will work for an infinite number of tabs without repeating CSS.

    This will mess-up your flex ordering though, you will need to add “order:99;” to the tab__content css to fix that.

    • Hi Frédéric Léveillée!
      You’re welcome. Yeah! it’s another way to switch tab content.

  4. LOVE IT! But I can’t seem to get rid of the radio buttons when the HTML is pasted into a CEWP in SharePoint. 🙁

Comments are closed.