sequentially displaying only one div at a time on click

Question

I have been researching StackOverflow for answers to this problem. There are answers that relate to this but I found no answers to this specific case. I have a series of divs. I want to show the first one when the page first loads and then move in order to the 2nd, 3rd, etc or in reverse to the 2nd, 1st... by clicking respective "prev" and "next" buttons. Only one div is visible at any one time. Right now I'm working on the forward direction. I thought using a loop that targets the changing div IDs that triggers on click would work. I was wrong.

This is the HTML

    <div class="container">
        <div id="section1" class="first">
                        something in section 1
        </div>
        <div id="section2" class="ad">
             <p>doing tricks with section 2</p>
        </div>
        <div id="section3" class="ad">
        <p>and now is time for section 3</p>
        </div>

        <button id="hide">Hide</button>


        </div>
        <button id="show">Show</button>

and this is the JS

        $(document).ready(function () {
          var count = $("div.container div").length;
          //alert(count);
          $('#hide').on('click', function () {
            $('div.ad').hide();   // hide all divs but the first
          });


          for (var i=0; i< count; i++) {
             $('#show').on('click', function () {
             var j = i+1;
             $('#section'+j).next().show();   
             $('#section'+(j+1)).prev().hide();
             });  
          };
        });

Answer 1

In your question, count is always 3 , and that's the start of your problems. There are always three div elements; the issue is that some of them are hidden . They disappear from sight, but not from the document.

 $(function() { $('#hide').click(function() { $('.container > div:visible:last').hide(); }); $('#show').click(function() { $('.container > div:not(:visible):first').show(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div id="section1" class="first"> something in section 1 </div> <div id="section2" class="ad"> <p>doing tricks with section 2</p> </div> <div id="section3" class="ad"> <p>and now is time for section 3</p> </div> </div> <button id="hide">Hide</button> <button id="show">Show</button> 

EDIT: Apparently, I misunderstood the question. (Why are your buttons called "hide" and "show" instead of "prev" and "next"?!?) What you want seems to be this:

 $(function() { $('.ad').hide(); $('#prev').click(function() { var $prev, $current = $('.container > div:visible:first'); if ($prev = $current.prev()) { $prev.show(); $current.hide(); } }); $('#next').click(function() { var $next, $current = $('.container > div:visible:first'); if ($next = $current.next()) { $next.show(); $current.hide(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div id="section1" class="first"> something in section 1 </div> <div id="section2" class="ad"> <p>doing tricks with section 2</p> </div> <div id="section3" class="ad"> <p>and now is time for section 3</p> </div> </div> <button id="prev">Prev</button> <button id="next">Next</button> 

Answer 2

http://jsfiddle.net/mwq1pkow/

CSS:

.hidden {
    display:none
}
.shown {
    display:block
}

HTML:

<div class="container">
    <div id="section1" class="cont_div shown">something in section 1</div>
    <div id="section2" class="cont_div hidden">
        <p>doing tricks with section 2</p>
    </div>
    <div id="section3" class="cont_div hidden">
        <p>and now is time for section 3</p>
    </div>
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>

JQ:

$('#next').click(function () {
    var $next = $('.shown').next();

    $('.shown').removeClass('shown').addClass('hidden');

    if ($next.size() == 0) $next = $('.cont_div').first();

    $next.addClass('shown');

})

$('#prev').click(function () {
    var $prev = $('.shown').prev();

    $('.shown').removeClass('shown').addClass('hidden');

    if ($prev.size() == 0) $prev = $('.cont_div').last();

    $prev.addClass('shown');

})