Very Simple Tabs With Pure Javascript CSS (Free Download)

Welcome to a tutorial on how to create responsive tabs with Javascript and CSS. Need to organize the information on your website a little better? Don’t want to load an entire library just for a simple tab plugin? Here is a sharing of my own, using pure Javascript and CSS – Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

TABLE OF CONTENTS

Download & Demo How It Works Useful Bits & Links
The End

 

 

DOWNLOAD & DEMO

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

HOW TO USE & DEMO

tabs.html
<!-- (A) LOAD CSS + JS -->
<link href="tabs.css" rel="stylesheet">
<script src="tabs.js"></script>
 
<!-- (B) TABS WRAPPER -->
<div id="myTabs">
  <!-- (B1) HEADERS -->
  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ul>
 
  <!-- (B2) CONTENTS -->
  <div>First content.</div>
  <div>Second content.</div>
  <div>Third content.</div>
</div>

<!-- (C) INIT TABS -->
<script>
tabify("myTabs");
</script> 
  • First
  • Second
  • Third
First content.
Second content.
Third content.

For you guys who just want to use this as a “plugin”:

  1. Captain Obvious, load the CSS and Javascript.
  2. Define the tab, it only needs 2 sections:
    • (B1) The nav header tabs.
    • (B2) Respective content for each tab.
  3. Lastly, just call tabify(TARGET) to create the tab.

 

 

HOW IT WORKS

All right, let us now walk through how the Javascript tab works in more detail.

 

THE JAVASCRIPT

tabs.js
function tabify (target) {
  // (A) GET HEADERS & CONTENTS
  let wrapper = document.getElementById(target),
      header = document.querySelector(`#${target} > ul`),
      headtabs = document.querySelectorAll(`#${target} > ul > li`),
      bodytabs = document.querySelectorAll(`#${target} > div`);
 
  // (B) ADD CSS + ONCLICK TOGGLE
  wrapper.classList.add("tabWrap");
  header.classList.add("tabHead");
  for (let i=0; i<headtabs.length; i++) {
    bodytabs[i].classList.add("tabBody");
    headtabs[i].onclick = () => {
      for (let j=0; j<headtabs.length; j++) {
        if (i==j) {
          headtabs[j].classList.add("open");
          bodytabs[j].classList.add("open");
        } else {
          headtabs[j].classList.remove("open");
          bodytabs[j].classList.remove("open");
        }
      }
    };
  }
 
  // (C) SET DEFAULT OPEN TAB IF NONE IS DEFINED
  if (wrapper.querySelector(".open") == null) {
    headtabs[0].classList.add("open");
    bodytabs[0].classList.add("open");
  }
}

The entire tabs mechanism is contained within this tabify() function. Looks complicated, but keep calm and look carefully.

  1. Get the HTML wrapper, header, header tabs, and content tabs.
  2. Add a whole load of CSS classes and onclick to toggle the tabs.
    • tabWrap to the tab wrapper itself.
    • tabHead to the header <ul>.
    • tabBody to all the content <div>.
    • Take note of how onclick works, it simply sets an open CSS class on both the header and content. Yes, we are actually using CSS to toggle between the tabs.
  3. Open the first tab by default.

 

 

CSS COSMETICS

tabs.css
/* (A) WRAPPER */
.tabWrap, .tabWrap * {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}
.tabWrap {
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 5px 5px 10px -1px rgba(0,0,0,0.28);
}
 
/* (B) HEADER TABS */
.tabHead {
  display: flex;
  background: #efefef;
  padding: 0; margin: 0;
  list-style: none;
}
.tabHead li {
  padding: 10px 20px;
  /*flex-grow: 1; flex-basis: 0;*/
  cursor: pointer;
}
.tabHead li.open {
  color: #fff;
  background: #2a87d7;
}

/* (C) CONTENT TABS */
.tabBody {
  padding: 20px;
  display: none;
}
.tabBody.open { display: block; }

These are mostly cosmetics. The only functional part I will say is:

  • (C) Hide the contents by default .tabBody{ display: none }
  • (C) Show the content as the user clicks on a tab .tabBody.open { display: block }

 

 

USEFUL BITS & LINKS

That’s all for the code, and here are a few small extras that may be useful to you.

 

SETTING DEFAULT OPEN TAB

<div id="myTabs">
  <ul>
    <li>First</li>
    <li class="open">Second</li>
    <li>Third</li>
  </ul>
  <div>First content.</div>
  <div class="open">Second content.</div>
  <div>Third content.</div>
</div>

As above, the first tab will open by default. If that is not the case, manually set a class="open" on both the respective header and content.

 

LINKS & REFERENCES

Looking for more ways to organize your content? Check out my other guides:

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you to better organize the information in your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

2 thoughts on “Very Simple Tabs With Pure Javascript CSS (Free Download)”

  1. Very useful tutorial!
    Would you give me a suggestion about implementing a cache function in the AJAX version (like in jQuery)? Thanks.

    1. 1) Add a new tab.cache = {} property.
      2) Modify xhr.onload()tab.cache[url]=document.createElement("div"); tab.cache[url].innerHTML=this.response; tab.txt.innerHTML=""; tab.txt.appendChild(tab.cache[url]);
      3) Lastly, change the entire load() function to read from the cache – if (tab.cache[url]===undefined) { DO AJAX } else { tab.txt.innerHTML=""; tab.txt.appendChild(tab.cache[url]); }

Leave a Comment

Your email address will not be published.