i am trying to create tabbed content in javascript but its working only once

Question

this is my html with css and javascript all in one place

JS

  var links = document.getElementsByTagName("a"); //get the links 
    var len = links.length;
    for(var i = 0; i<len; i++) { 
       links[i].onclick = handleClick; // add onclick handler 
    }

    function handleClick(e){
       var target = e.target;
       var id = target.id + "content";
       document.getElementById(id).style.zIndex = 10;
    }

HTML

<div id="tabbed">
<a href="#" id="tabe1">Tabe1</a>
    <div class="section" id="tabe1content">
            <div>
        <p> content1 </p>   
        </div>
    </div>
    <a href="#" id="tabe2">Tabe2</a>
    <div class="section" id="tabe2content">
            <div>
        <p> content2 </p>   
        </div>
    </div>
    <a href="#" id="tabe3">Tabe3</a>
    <div class="section" id="tabe3content">
            <div>
        <p> content3 </p>   
        </div>
    </div>
 </div>

CSS

.section{
    position:absolute;
    float:left;
    width:500px;
    background-color:gray;
    left:0;
    top:0;
    height:300px;
    margin-top:30px;
}
#tabbed{
    position:relative;

}
a {
    margin-right:10px;
    float:left;
    display:block;
}

When I test it, it only works once. The second time when I click on table 1 it still shows table 3. Please take a look at what is wrong and is there any other way which is better then mine?

Eventually all your elements are going to have a z-index of 10. You have to reset it back to normal when clicking off. — tymeJV, Sep 25 '13 at 17:45
actually i dont like jquery much i want to do it in pure javascript — abdul raziq, Sep 25 '13 at 17:54

score 1 · Accepted Answer · answered Sep 25 '13 at 18:47

delegate on parent
track the biggest z-index value

http://jsfiddle.net/3LuC4/6/

.section{
    position:absolute;
    float:left;
    width:500px;
    background-color:gray;
    left:0;
    top:0;
    height:300px;
    margin-top:30px;
    z-index: 1;
}
#tabbed{
    position:relative;
}
a {
    margin-right:10px;
    float:left;
    display:block;
}

<div id="tabbed">
<a href="#" id="tabe1">Tabe1</a>
    <div class="section" id="tabe1content">
        <div>
            <p> content1 </p>   
        </div>
    </div>
    <a href="#" id="tabe2">Tabe2</a>
    <div class="section" id="tabe2content">
        <div>
            <p> content2 </p>   
        </div>
    </div>
    <a href="#" id="tabe3">Tabe3</a>
    <div class="section" id="tabe3content">
        <div>
            <p> content3 </p>   
        </div>
    </div>
 </div>

var root = document.getElementById("tabbed");
var veryTop = 2;

root.onclick = handleClick;

function handleClick(e){
    var target = e.target;
    if ( target.tagName !== 'A' ) { e.preventDefault(); return; }
    var tab = document.getElementById( target.id + 'content' );
    tab.style.zIndex = ( veryTop++ ).toString();
    e.preventDefault();
}

PS. Should solve your 'works once' problem.

Works until the browser hits its [max z-index value](http://stackoverflow.com/questions/8565821/css-max-z-index-value) (albeit after 2147483647 iterations) ;) — Moob, Sep 26 '13 at 19:16

score 0 · Answer 2 · answered Sep 25 '13 at 17:59

0

When you click on a tab, near the end of your JS, you set the z-index of each tab to 10. After you've done this, they do NOT change back.

Inside the onclick handler you need to build a string that sets all OTHER z-indexes to a lower number; I'm not sure of the exact way to do this, but you seem to know enough to complete that part.

answered Sep 25 '13 at 17:59

jwarner112

1,492
2
14
29

yeah i stuck there as well – abdul raziq Sep 25 '13 at 18:02

score 0 · Answer 3 · answered Sep 25 '13 at 18:12

You can iterate over your section class, reset the z-index for all, then set your new one:

var elems = document.getElementsByClassName("section");
for (var i = 0; i < elems.length; i++) {
    elem[i].style.zIndex = 0; //or whatever your default is
}

var target = e.target;
var id = target.id + "content";
document.getElementById(id).style.zIndex = 10;

Moob · Answer 4 · 2013-09-26T19:17:24.220

0

Your z-indexes all end up the same. Add a little function to sort them:

function sortZindex(){
   for(var i = 0; i<len; i++) { 
       var id = links[i].id + "content";
       document.getElementById(id).style.zIndex = 9;
    }
}

http://jsfiddle.net/U2qfj/

edited Sep 26 '13 at 19:17

answered Sep 25 '13 at 18:17

Moob

14,420
1
34
47

oh my mistake now i know , sorry – abdul raziq Sep 25 '13 at 18:25

i am trying to create tabbed content in javascript but its working only once

4 Answers4