move to next div with class when another div is clicked

I'm creating a one page website that acts as a form of book. when the "down" div is clicked, i want the current content div to fadeOut & for the next content div to be shown. I've got it working.. but to a certain extent. Also, I need to use a if statement with length to determine when the user has reached the last div, so that i can remove the down div.

Right now, it isn't working exactly how I want it too. Also I think I need to use next, length etc. Here's a quick example of what I'm working with

HTML

<div class="content>
   <h1> page one </h1>
</div>
<div class="content hidden-content>
   <h1> page two </h1>
<div>
<div class="content hidden-content>
   <h1> last page </h1>
</div>
<div class="hover-wrap>
   <div class="down"></div>
</div>

jQuery

$(".hover-wrap").hover(function(){
if (!$(".down").hasClass('animated')) {
    $(".down").dequeue().stop().animate({ bottom: "0px" }, 500);
}
}, function() {
    $(".down").addClass('animated').animate({ bottom: "-75px" }, 500, "linear", function() {
    $(".down").removeClass('animated').dequeue();
    });
});

var btnNode             = $(".down"),
    btnWrap         = $(".hover-wrap"),
    contentNode     = $(".content"),
    nextContentNode = contentNode.next(".content"),
    endNode             = $(".credit"),
    fadeInSpeed     = 500;


btnNode.on("click", function(){

contentNode.hide();

if (nextContentNode.length){
    nextContentNode.fadeIn(fadeInSpeed);

} else  {
    contentNode.hide();
    endNode.fadeIn();
    btnWrap.fadeOut();
} 
});

Heres a codepen which makes things a little clearer! thanks!

http://codepen.io/Mctowlie/pen/qxdyE

Is it what you want : http://codepen.io/OxyDesign/pen/rykLI ?

JS

$(document).ready(function(){
    var btnNode = $(".down"),
        btnWrap = $(".hover-wrap"),
        pages = $('[data-page]'),
        pagesLgth = pages.length,
        fadeInSpeed = 500;

    btnWrap.hover(function() {
        if (!btnNode.hasClass('animated')) {
            btnNode.dequeue().stop().animate({
                bottom: "0px"
            }, 500);
        }
    }, function() {
        btnNode.addClass('animated').animate({
            bottom: "-75px"
        }, 500, "linear", function() {
            btnNode.removeClass('animated').dequeue();
        });
    });


    btnNode.on("click", function(e) {
        e.preventDefault();
        var currentPage = pages.filter('.active');
        currentPage.hide().removeClass('active');
        if(currentPage.data('page') < pagesLgth){
            currentPage.next('[data-page]').fadeIn(fadeInSpeed).addClass('active');
        }else{
            $('[data-page="1"]').fadeIn(fadeInSpeed).addClass('active');
        }
    });
});