Simple multi-tab hide/show DIV

Question

Overview: https://i.stack.imgur.com/8ManD.png

I'm trying to create a simple multi-tab that hides/shows divs without using jquery. The shorter the code the better. Thanks!

Answer 1

I have added a fiddle.Try:

http://jsfiddle.net/y76k4/

HTML:

<div width="100%">
<span id='sel1' onclick="show('sel1','resultsel1');">home</span><span id='sel2' onclick="show('sel2','resultsel2');">div1</span><span id='sel3' onclick="show('sel3','resultsel3');">div2</span></div>
<div id="resultsel1">Home Page</div>
<div id="resultsel2">div2</div>
<div id="resultsel3">div3</div>

Javascript:

var selected="sel1";
var disp="resultsel1";
function show(a,b)
{
  document.getElementById(selected).style.backgroundColor = "rgb(150,150,150)";
document.getElementById(disp).style.display = "none";

  document.getElementById(a).style.backgroundColor = "rgb(200,200,200)";      

document.getElementById(b).style.display = "block";
selected=a;
disp=b;
}

CSS:

#sel1{
    cursor:pointer;
    background-color:rgb(200,200,200);
    padding-left:13px;
    padding-right:13px;
}
#sel2{
    cursor:pointer;
    background-color:rgb(150,150,150);
    padding-left:13px;
    padding-right:13px;
}
#sel3{
    cursor:pointer;
    background-color:rgb(150,150,150);
    padding-left:13px;
    padding-right:13px;
}
#resultsel1{
    display:block;
    position:relative;
    bottom:1px;
    width:100%;
    height:30px;
    background-color:rgb(200,200,200);
}
#resultsel2{
    display:none;
    position:relative;
    bottom:1px;
    width:100%;
    height:30px;
    background-color:rgb(200,200,200);
}
#resultsel3{
    display:none;
    position:relative;
    bottom:1px;
    width:100%;
    height:30px;
    background-color:rgb(200,200,200);
}

Answer 2

You can create it using css3 for all modern browsers. Take a look here. Adding link to the demo.

Answer 3

This is the best method I've found of doing this personally. Relatively simple to implement.

Answer 4

There's solution with just html and js:

HTML:

<a href="#" id="div1">Home</a> | <a href="#" id="div2">Div 2</a> | <a href="#" id="div3">Div 3</a>

<div id="container">
There's the home contents!
</div>

Javascript:

window.load = function() {
  var div1 = document.getElementById('container').innerHTML;
  var div2 = "There's the div 2 contents!";
  var div3 = "There's the div 3 contents!";

 document.getElementById('div1').onclick = function() {
   document.getElementById('container').innerHTML = div1;
 }
 document.getElementById('div2').onclick = function() {
   document.getElementById('container').innerHTML = div2;
 }
 document.getElementById('div3').onclick = function() {
   document.getElementById('container').innerHTML = div3;
 }
}

Aaand there's the fiddle: http://jsfiddle.net/wuyXm/1/