CODEWITHSUNDEEP
javascripthtmlbuttonhide
user3193259
user3193259

Reputation:

want to hide next button when it displays the last div

can you guys help me. i want to hide button when last div is displayed? when next div is displayed then the button hides and show no more the 2 divs. 

$(document).ready(function()
{

    $("#next").click(function()
    {
        if ($(".divs div:visible").next().length != 0)
        {
            $(".divs div:visible").next().show().prev().hide();

            if($('.divs').find('div').last())
            {
                 $("#next").hide();
             }
        }

        return false;
    });
}

html:


<div class="divs">
    <div class="cls1">1</div>
    <div class="cls2">2</div>
    <div class="cls3">3</div>
    <div class="cls4">4</div>
    <div class="cls5">5</div>
    <div class="cls6">6</div>
    <div class="cls7">7</div>
</div>
<a id="next">next</a>

Upvotes: 0

Views: 642

Answers (2)

Omri Aharon
Omri Aharon

Reputation: 17064

The problem is in your code here:

if($('.divs').find('div').last())
        {
             $("#next").hide();
         }

This returns true on the first click, resulting in hiding the button the first time you click it. What you need to do, is check if there are no elements after the visible div, and that's when you hide it. This should do the trick:

$("#next").click(function()
{
    if ($(".divs div:visible").next().length != 0)
    {
        $(".divs div:visible").next().show().prev().hide();
        if ($(".divs div:visible").next().length == 0)
        {
            $("#next").hide();
        }
    }

    return false;
});

Upvotes: 1

CRABOLO
CRABOLO

Reputation: 8793

$("#next").click(function()
{
    if ($(".divs div:visible").next().length != 0)
    {
        $(".divs div:visible").next().show().prev().hide();
    }
    else {
       $('#next').hide();
       return false;
    }
});
}

Upvotes: 0

Related Questions