jquery/javascript function only works once

Question

I have a very odd situation, I have looked all over and cannot find someone with a similar situation, and in my eyes, I don't see why this inst working. I'm trying to make a simple tab list with jQuery:

I have a JS function as follows:

function changeWindow(contentId) {
    $(".tabs").css("border-bottom","thin solid black");
    $("#" + contentId + "Tab").css("border-bottom","thick solid white");
    $(".content").hide();
    $("#" + contentId).show();
    $("#" + contentId + "Head").show();    //when I comment this line, all works well.
}

My html is:

<div id="header">
    <div id="tabs">
        <span onClick="changeWindow('browse')" id="browseTab" class="tabs"> Browse </span>
        <span onClick="changeWindow('collection')" id="collectionTab" class="tabs"> My Collection </span>
        <span onClick="changeWindow('play')" id="playTab" class="tabs"> Play! </span>
    </div>
    <div id="contentHeads">
        <div id="browseHead" class="content">
            some Html
        </div>
        <div id="collectionHead" class="content">
            some Html
        </div>
        <div id="playHead" class="content">
            some Html
        </div>
    </div>
</div>
<div id="gameField">
    <div id="browse" class="content">
        some Html
    </div>
    <div id="collection" class="content">
        some Html
    </div>
    <div id="play" class="content">
        some Html
    </div>
</div>

I dont think it matters much, but here is my CSS(I left some out):

#tabs
{
    position: absolute;
    top: 10px;
    left: 10px;
    border-bottom: medium solid black;
}
.tabs
{
    border: thin solid black;
    padding-left: 50px;
    padding-right: 50px;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
}
.content
{
    position: relative;
    height: 100%;
    overflow: hidden;
}

The curious thing is, this function will run once(i.e i can click a tab) and everything works perfect. But after i click a tab, the CSS property cursor: pointer; no longer did anything, and the JS function no longer works. I have tested and other functions still run when called, just not this one. After a bit of testing, I came to the conclusion that it is because of the last line in the JS function. When I comment it all works well(except that the Heads don't show). I dont understand what is going on, i think it is an HTML problom, but have no clue. Does anyone know why this may be happening?

Thanks in advance.

Hit F12 to open the developer console and see if you have any javascript errors. — Jack
– Jack, Commented Feb 17, 2014 at 17:18

Pointy · Accepted Answer · 2014-02-17 17:24:06Z

3

The problem is that your "content" blocks come after the menu in the document, so when they're visible they cover the menu up.

Here is a fixed jsfiddle to demonstrate.

I updated the CSS:

.content {
    position: relative;
    height: 100%;
    overflow: hidden;
    margin-top: 40px;
    display: none;
}

I also added CSS to move the "gameField" stuff out of the way.

It can be tricky to diagnose problems like this, but the developer tools ("inspector") generally make it a lot easier.

answered Feb 17, 2014 at 17:24

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ozay34 Over a year ago

I just face palmed so hard, thanks for the response, it worked! Thanks for the tip, ill be sure to keep it in mind later.

Collectives™ on Stack Overflow

jquery/javascript function only works once

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related