CODEWITHSUNDEEP
jqueryhtml
Robin Jan Weber
Robin Jan Weber

Reputation: 13

jQuery Show/Hide trouble

I'm building this prev/next option to show another div but I'm walking into some weird problems.

$(document).ready(function(){
    var cur = 0;
    var tbpages = ["#tb1", "#tb2", "#tb3", "#tb4"];
    //tb.volgende
    $("#next").click(function(){
        $(tbpages[cur]).hide();
        cur = cur + 1;
        $(tbpages[cur]).show();
    });
    //tb.vorige
    $("#back").click(function(){
        $(tbpages[cur]).hide();
        cur = cur - 1;
        $(tbpages[cur]).show();
    });
});

Now what happens: You start with #tb1 open, click next (#tb1 hides and #tb2 opens), click next again, and nothing happens.

The divs #tb1-4 all are identical (except from their content).

HTML:

<div id="tb1" class="praatwolk">
    <h2>Ik ben Theo</h2>
    <p>text</p>
    <center><button id="next">Volgende</button></center>
</div>
<div id="tb2" class="praatwolk" style="display: none;">
    <h2>Aanleiding/relevantie</h2>
    <p>text</p>
    <center><button id="back">Vorige</button><button id="next">Volgende</button></center>
</div>
<div id="tb3" class="praatwolk" style="display: none;">
    <h2>Wat is het theoretisch kader</h2>
    <p>text</p>
    <center><button id="back">Vorige</button><button id="next">Volgende</button></center>
</div>
<div id="tb4" class="praatwolk" style="display: none;">
    <h2>Bediening van de MOOC</h2>
    <p>text</p>
    <center><button id="back">Vorige</button><button id="next">Volgende</button></center>
</div>

Upvotes: 1

Views: 74

Answers (5)

Nivs
Nivs

Reputation: 374

<html>


 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $(document).ready(function () {
        var cur = 0;
        var tbpages = ["#tb1", "#tb2", "#tb3", "#tb4"];
        //tb.volgende
        $("#next").click(function () {
            $(tbpages[cur]).hide();
            cur = cur + 1;
            $(tbpages[cur]).show();
        });
        //tb.vorige
        $("#back").click(function () {
            $(tbpages[cur]).hide();
            cur = cur - 1;
            $(tbpages[cur]).show();
        });
    });
</script>


<div id="tb1">1</div>
<div id="tb2" style="display:none">2</div>
<div id="tb3" style="display:none">3</div>
<div id="tb4" style="display:none">4</div>
<input type="button" id="next" value="Next" />
<input type="button" id="back" value="Back" />

Upvotes: 0

NIDHIN MATHEW
NIDHIN MATHEW

Reputation: 42

This can be because the page is rendering more than one button with same id. I made some modification to your code and now it is working fine.

<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var cur = 0;
    if(cur==0)
    $("#back").hide();
    else
    $("#back").show();

    var tbpages = ["#tb1", "#tb2", "#tb3", "#tb4"];
    //tb.volgende
    $("#next").click(function(){
$(tbpages[cur]).hide();
cur = cur + 1;    
if(cur==0)
    $("#back").hide();
    else
    $("#back").show();


        $(tbpages[cur]).show();
    });
    //tb.vorige
    $("#back").click(function(){
$(tbpages[cur]).hide();
 cur = cur - 1;
    if(cur==0)
    $("#back").hide();
    else
    $("#back").show();


        $(tbpages[cur]).show();
    });
});
</script>
</head>
<body>

<div id="tb1" class="praatwolk">
        <h2>Ik ben Theo</h2>
        <p>text</p>

</div>
<div id="tb2" class="praatwolk" style="display: none;">
    <h2>Aanleiding/relevantie</h2>
    <p>text</p>

</div>
<div id="tb3" class="praatwolk" style="display: none;">
    <h2>Wat is het theoretisch kader</h2>
    <p>text</p>

</div>
<div id="tb4" class="praatwolk" style="display: none;">
    <h2>Bediening van de MOOC</h2>
    <p>text</p>
</div>
<center><button id="back">Vorige</button><button id="next">Volgende</button></center>
</body>
</html>

Upvotes: 0

insertusernamehere
insertusernamehere

Reputation: 23580

The problem is, you're using multiple ids with the same name nextand back. This is not valid HTML and the browser is most likely to select the first element he finds. So when you click the second next-button the eventHandler is never triggered. Use the class-attribute instead if you want to address similar elements:

<button class="next">Volgende</button>
<button class="prev">Vorige</button>

The new selector:

$(".next").click(function(){});
$(".back").click(function(){});

Upvotes: 1

Radonirina Maminiaina
Radonirina Maminiaina

Reputation: 7004

Just test you curnumber, if it is lower than tbpages.length then show you element.

if ( cur < tbpages.length ) {
   $(tbpages[cur]).show();
}

Demo: http://jsfiddle.net/qkccgruz/

Upvotes: 0

Lelio Faieta
Lelio Faieta

Reputation: 6669

You cannot have more than one element with the same id. 

<center><button id="back">Vorige</button><button id="next">Volgende</button></center>

is defined three times at least. Try replace id="back" and id="next" with class="back" and class="next"

Upvotes: 0

Related Questions