Next Prev navigation

Next Prev navigation of divs staring from any item

by abhiklpm

HTML

<div id="group">
    <div id="one" style="display:none">one</div>
    <div style="display:none" id="two">two</div>
    <div style="display:none" id="three">three</div>
    <div style="display:none" id="four" class="current">four</div>
    <div style="display:none" id="five">five</div>
    <div style="display:none" id="six">six</div>
    <div style="display:none" id="seven">seven</div>
    <div style="display:none" id="eight">eight</div>
</div>
<div id="next" style="display:none" class="next">next</div>
<div style="display:none" id="prev" class="prev">prev</div>
<div style="display:none" id="prev">SUBMIT</div>

CSS

#group div {
    border:1px solid red;
    width:100px;
    height:100px;
}
#next {
    margin-left: 100px;
}

JavaScript

$(function () {
    var updateDiv = function (trigger) {
        var currentDiv = $(".current");
        $("#group div").removeClass("current").hide();
        if (trigger.hasClass("next") && currentDiv.next("div").length > 0) {
            currentDiv.next("div").addClass("current").show();
        } else if (trigger.hasClass("prev") && currentDiv.prev("div").length > 0) {
            currentDiv.prev("div").addClass("current").show();
        }
        updateNavigation();
    };

    var updateNavigation = function () {
        var intialDiv = $(".current");
        intialDiv.show();
        var intialDivIndex = intialDiv.index();
        intialDivIndex > 0 ? $("#prev").show() : $("#prev").hide();
        intialDivIndex < totalDivs - 1 ? $("#next").show() : $("#next").hide();
    };

    var totalDivs = $("#group div").length;
    updateNavigation();
    $("#next, #prev").on("click", function () {
        updateDiv($(this));
    });
});