horizontal tabs in html with css

Some times we need to arrange our webpage contents in group and controlling the appearance of each one of them by selecting the right category, so we can use horizontal or vertical tabs with some divs showing or hide them as we need. building this kind of tabs is very simple by using HTML and CSS with some Javascript code to handle the mouse Onclick events.

Source Code:

download full project source code for horizontal tabs in html with css.

Building horizontal Tabs

We will start this project by designing a simple horizontal menu, you can read more about How to build simple horizontal css menus, by using ul and il elements.

HTML Code

<ul id="tab_ul" class="tabs">
        <li class="selected"><a rel="tab_div1" href="#" onclick="javascript:ShowMyDiv(this);">Tab 1</a></li>
        <li class=""><a rel="tab_div2" href="#" onclick="javascript:ShowMyDiv(this);">Tab 2</a></li>
        <li class=""><a rel="tab_div3" href="#" onclick="javascript:ShowMyDiv(this);">Tab 3</a></li>
        <li class=""><a rel="tab_div4" href="#" onclick="javascript:ShowMyDiv(this);">Tab 4</a></li>
</ul>

CSS Code

<style>
/***********************************************************************
http://function-code.blogspot.com/2013/03/horizontal-tabs-in-html-with-css.html
My code is free to use, but not free to republish
************************************************************************/
ul.tabs
{
    padding: 7px 0;
    font-size: 0;
    margin:0;
    list-style-type: none;
    text-align: left;
}
        
ul.tabs li
{
    display: inline;
    margin: 0;
    margin-right:3px;
}
        
ul.tabs li a
{
    font: normal 12px Verdana;
    text-decoration: none;
    position: relative;
    z-index: 1;
    padding: 7px 16px;
    border: 1px solid #CCC;
    border-bottom-color:#B7B7B7;
    color: #000;
    background: #F0F0F0;
    border-radius: 6px 6px 0px 0px;
 -moz-border-radius: 6px 6px 0px 0px;
    outline:none;
}

ul.tabs li a:hover
{
    border: 1px solid #B7B7B7;
    background:#E0E0E0;
}
        
ul.tabs li.selected a
{
    position: relative;
    top: 0px;
    font-weight:bold;
    background: white;
    border: 1px solid #B7B7B7;
    border-bottom-color: white;
}
</style>

Building several container divs

now we can create several divs related to our previous menu and we can hide and show any div as selected tab.
HTML Code

<div class="tabcontents">
 <div class="tabcontent" id="tab_div1" style="display: block;">
  <b>Content 1 Title</b>
  <p>The content could contain anything text page or submit form or any other HTML objects.</p>
 </div>
 <div class="tabcontent" id="tab_div2" style="display: none;">
  <b>Where are the divs</b>
  <p>All content divs related to the tabs are invisible only the one related to the selected tab is set to be visible.</p>
 </div>
 <div class="tabcontent" id="tab_div3" style="display: none;">
  <b>About tabs</b>
  <p>by Selecting any tab its classname will set to be "selected" which has a different style from the other tabs<br>
  that can be done by using a simple javascript code<br>
  <b><I>TabObj.className="selected";</I></b></p>
 </div>
 <div class="tabcontent" id="tab_div4" style="display: none;">            
  <div style="border:1px solid black;">
  <p><B>Read more about</B><br>
  <A HREF="http://function-code.blogspot.com/2012/12/div-inside-another-div.html">how to put div inside another div</A><br>
  <A HREF="http://function-code.blogspot.com/2012/11/change-div-border-width-style-and-color.html">How to change div border width style and color</A>
  </p>
  <div>
 </div>
</div>

CSS Code

<style>
div
.tabcontents
{ width: 400px;
    border: 1px solid #B7B7B7; padding: 20px;
    background-color:#FFF;
    border-radius: 0 2px 2px 2px;
}
</style>

Adding JavaScript code.

To switch between selected divs by Clicking on any tab we use a JavaScript function which hide all divs and show the only tab we need.

<script>
function ShowMyDiv(Obj){
  var elements = document.getElementsByTagName('div');
 for (var i = 0; i < elements.length; i++) 
  if(elements[i].className=='tabcontent')
   elements[i].style.display= 'none';

 document.getElementById(Obj.rel).style.display= 'block';
 //------------------------------------

  var ul_el = document.getElementById('tab_ul');
  var li_el = ul_el.getElementsByTagName('li');
 for (var i = 0; i < li_el.length; i++) 
  li_el[i].className="";

 Obj.parentNode.className="selected";
}
</script>

If this post was good and helpful for you, Please give it Like.

.