Navigate through multiple divs using next/prev

Question

So basically my DIV will look like this.

<div id="group">
    <div id="one">one</div>
    <div style="display:none" id="two">two</div>
    <div style="display:none" id="three">three</div>
    <div style="display:none" id="four">four</div>
</div>
<div id="next">next</div>
<div style="display:none" id="prev">prev</div>
<div style="display:none" id="prev">SUBMIT</div>

This is just an example, I could even have 10 or 20 divs.

I want to navigate from one to four in this example. When it reaches end it must hide the next button and show submit button. And when I navigate back to first page it must hide the prev button

Here's what I have tried so far:

$("#next").click(function () {
    $("#prev").show();
    $("#one").hide();
    $("#one").addClass("current");
    $(".current").next().addClass("current").show();
    $(".current").prev().removeClass("current").hide();
});

$("#prev").click(function () {
    $("#prev").show();
    $("#one").hide();
    $("#one").addClass("current");
    $(".current").prev().addClass("current").show();
    $(".current").next().removeClass("current").hide();
});

This works for certain navigation after that it gets messes up. Some guidance will be helpful to me and others.

Thanks

JSFIDDLE : http://jsfiddle.net/aVJBY/450/

Answer 1

I see you have an answer, but I would suggest a more structured approach that reuses a single code path:

http://jsfiddle.net/TrueBlueAussie/aVJBY/460/

function updateItems(delta)
{
    var $items = $('#group').children();
    var $current = $items.filter('.current');
    var index = $current.index();
    var newIndex = index+delta;
    // Range check the new index
    newIndex = (newIndex < 0) ? 0 : ((newIndex > $items.length) ? $items.length : newIndex); 
    if (newIndex != index){
        $current.removeClass('current');
        $current = $items.eq(newIndex).addClass('current');
        // Hide/show the next/prev
        $("#prev").toggle(!$current.is($items.first()));    
        $("#next").toggle(!$current.is($items.last()));    
    }
}
$("#next").click(function () {
    updateItems(1);
});
$("#prev").click(function () {
    updateItems(-1);
});

Notes:

• The range capping can be simplified, but you get the idea.
• You do not need to initial inline styling as that can be done in the CSS.
• This is not limited in any way by the content. Here I added 6 more divs: http://jsfiddle.net/TrueBlueAussie/aVJBY/463/

Update

As I do not like situations where styling is required for initial "state" in a page, here is a new version that sets the initial state correctly too without any initial styling (using a 0 delta). I also removed a redundant var:

function updateItems(delta)
{
    var $items = $('#group').children();
    var $current = $items.filter('.current');
    $current = $current.length ? $current : $items.first();
    var index = $current.index() + delta;
    // Range check the new index
    index = (index < 0) ? 0 : ((index > $items.length) ? $items.length : index); 
    $current.removeClass('current');
    $current = $items.eq(index).addClass('current');
    // Hide/show the next/prev
    $("#prev").toggle(!$current.is($items.first()));    
    $("#next").toggle(!$current.is($items.last()));    
}
$("#next").click(function () {
    updateItems(1);
});
$("#prev").click(function () {
    updateItems(-1);
});
// Cause initial selection
updateItems(0);

JSFiddle: http://jsfiddle.net/TrueBlueAussie/aVJBY/468/

Answer 2

I am showing another approach where you can set the current item to any element, and it will show the next prev arrows accordingly.

$(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));
  });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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>