CODEWITHSUNDEEP
jqueryhtmlcss
Ivan
Ivan

Reputation: 25

For the last block to hide the button

I am trying to create a test page

For the last block to hide the button

My code:

Fiddle

    $("#test_inner .test-item").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $(".next-btn").click(function(){
        if ($("#test_inner .test-item:visible").next().length != 0)
            $("#test_inner .test-item:visible").next().show().prev().hide();
        else {
            $("#test_inner .test-item:visible").hide();
            $("#test_inner .test-item:first").show();
        }
        return false;
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="test_inner">					
    <div class="test-item">DIV1</div>
    <div class="test-item">DIV2</div>
    <div class="test-item">DIV3</div>
    <div class="test-item">DIV4</div>
    <div class="test-item">DIV5</div>
    
    <a href="#" class="next-btn">send</a>
</div>

I would be grateful for any help.

Upvotes: 0

Views: 52

Answers (3)

Jose Mar
Jose Mar

Reputation: 694

Try This

$("#test_inner .test-item").each(function(e) {
    if (e != 0)
        $(this).hide();
});

var array = $(".test-item");
var index = 0;
$(".next-btn").click(function(){
if(index==array.length-1){
    $(this).hide();
}

array.eq(index++).hide();
array.eq(index).show();

})

Upvotes: 1

Samir Selia
Samir Selia

Reputation: 7065

You can set a counter and keep a check on last element. If last element is reached hide the button.

Here is the updated code:

var i = 0;
$(".next-btn").click(function(){
    i++;
    if(i == 4)
    {
           $(this).hide();
    }
    if ($("#test_inner .test-item:visible").next().length != 0)
        $("#test_inner .test-item:visible").next().show().prev().hide();
    else {
        $("#test_inner .test-item:visible").hide();
        $("#test_inner .test-item:first").show();
    }
    return false;
});

Upvotes: 2

BravoZulu
BravoZulu

Reputation: 1140

You need to add:

    if ($("#test_inner .test-item:visible").length == 0)
        $(".next-btn").hide();

Here is a working JSFiddle

Upvotes: 1

Related Questions