What is wrong with this tabbed content?

Question

I have a google map and a contact form on my contact.html file. They were displayed block as default. I wanted to change it to a tabbed look. Let's say i have a code like this in HTML:

<div id="tab-group" class="tab-group">              
<h3 class="tab-header activate" id="tab-header-1">We are here</h3>
        <div class="tab-content activate" id="tab-content-1"></div>
    <h3 class="tab-header" id="tab-header-2">Contact us</h3>
        <div class="tab-content" id="tab-content-2">

The content in that div with the id="tab-content-1" , I have a google map with the necessary script in the head. And in div with the id="tab-content-2", I have a contact form like;

<form class="tab-content-2" method="post" action="contact-post.html">
     <div>
        <span><label>NAME</label></span>
        <span><input name="userName" type="text" class="textbox"></span>
     </div>
     <div>
        <span><label>E-MAIL</label></span>
        <span><input name="userEmail" type="text" class="textbox"></span>
     </div>
     <div>
        <span><label>PHONE</label></span>
        <span><input name="userPhone" type="text" class="textbox"></span>
     </div>
     <div>
        <span><label>YOUR MESSAGE</label></span>
        <span><textarea name="userMsg"> </textarea></span>
     </div>
     <div>
        <span><input type="submit" value="Send me"></span>
     </div>
</form>

Here is the JavaScript:

"use strict";

 document.addEventListener('DOMContentLoaded', function() {
document.getElementById('tab-group').className = 'activate';

var headerClass = 'tab-header',
    contentClass = 'tab-content';

document.getElementById('tab-group').addEventListener('click', function(event) {

    var myHeader = event.target;

    if (myHeader.className !== headerClass) return;

    var myID = myHeader.id, // e.g. tab-header-1
        contentID = myID.replace('header', 'content'); // result: tab-content-1

    deactivateAllTabs();

    myHeader.className = headerClass + ' activate';
    document.getElementById(contentID).className = contentClass + ' activate';
});

function deactivateAllTabs() {
    var tabHeaders = document.getElementsByClassName(headerClass),
        tabContents = document.getElementsByClassName(contentClass);

    for (var i = 0; i < tabHeaders.length; i++) {
        tabHeaders[i].className = headerClass;
        tabContents[i].className = contentClass;
    }
}
});

I know I have to clean all these up but i am lost in such a basic thing and getting angry, here is the CSS:

#tab-group h3 {
text-align: left;
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
}
.activate {
position: relative;
margin-bottom: 2em;
}

#tab-group.activate .tab-header {
font-weight: normal;
font-size: 13px;
text-transform: uppercase;
padding: 4px 6px;
display:inline;
}

   .activate .tab-header {
position: absolute;
top: 0;
margin: 0;
padding: 0.25em 0.5em;
left: 0;
background: rgba(168, 161, 152, 0.34);
border: 1px solid #161616;
border-radius: 4px 4px 0 0;
z-index: 2;
cursor: pointer;
   }

  .activate .tab-header.activate {
background: #000;
  }

  .activate .tab-content {
position: relative;
top: 0;
margin: 0;
padding: 0.5em;
top: 24px;
border: 1px solid #999;
z-index: 1;
background: white;
zoom: 1;
  }

  .activate .tab-content:after {
display: block;
height: 0;
clear: both;
visibility: hidden;
  }

  .activate #tab-header-2 {
left: 9em;
  }
  .activate .tab-content {

  }

  .activate .tab-content:active {
display: block;
  }

  #tab-content-1 {
width: 56.4em;
    height:30em;
  }
  #tab-header-1 {
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
  }
  #tab-header-2 {
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
  }
  #tab-content-2{
position:relative;
padding-bottom:30px;
background-color:#000;

  }

I want it to act like a simple tabbed content. Yet, the contents of the tabs are displayed as block and it doesn't change the content when you click on h3 tab-headers. it looks like this..... What am I doing wrong ? Thanks in advance...

Answer 1

It should just be a simple fix. Try adding:

.activate .tab-content { display: none; }
.activate .tab-content.activate { display: block; }

That way, only the active tab is visible, and the others are hidden.

Check it out: http://jsfiddle.net/t8G57/2/