Scroll div using jQuery

Question

I have a <div>, divided into 3 <div>s. Two of those divs are taken as previous and next buttons, having ids prev and next respectively. 3 <div>s having ids diva, divb, and divc are arranged on the bottom. divb and divc have 0 width so that they are hidden and only diva is visible. I want to hide diva to hide (set width to 0) and divb to appear when user click id=next and if the button is clicked again, I want divb to hide and divc to appear. Also I want this to happen reverse if id=prev is clicked.

Below is an image of what I am trying to say;

Here is the fiddle.

Answer 1

I added class "current" and "page" to your html. You need to change your html to :

<div class="scroll">
   <div class="buttons">
       <a id="prev">prev</a>
       <a id="middle">test</a>
        <a id="nxt">next</a>
    </div>
    <div id="diva" class="current page">div AA</div>
    <div id="divb" class="page">div BB</div>
    <div id="divc" class="page">div CC</div>
</div>

Your Js code to :

$(document).ready(function() {
   $('#nxt').click(function() {
    var $cur = $('.current');
    var $next = $cur.next();
    if ($next.length == 0) 
       return false;

    $cur.removeClass('current');
    $next.addClass('current');

    $('.page').not('.current').animate({"width": 0}, "slow");
    $('.current').animate({"width": 200}, "slow");
  });

  $('#prev').click(function() {
     var $cur = $('.current');
     var $prev = $cur.prev('.page');

     if ($prev.length == 0) 
       return false;

     $cur.removeClass('current');
     $prev.addClass('current');

     $('.page').not('.current').animate({"width": 0}, "slow");
     $('.current').animate({"width": 200}, "slow");
  });
 });

Working demo http://jsfiddle.net/FGGBH/

Hope this helps :)

Answer 2

I used class to implement what you need. Check DEMO here

Full code:

var $pages = $('.page');
$('#nxt').click(
  function() {
    var $cur = $('.active');       //get current active
    var $next = $cur.next();       //get next to cur

    /*
     * Add logic inside below if condition for going 
     * back to first div.
    */
    if ($next.length == 0) return; //if nothing in next, return.

    $cur.removeClass('active');    //remove active class from cur active
    $next.addClass('active');      //add next as current active

    //animate everything except .active (which is next)
    $('.page').not('.active').animate({"width": 0}, "slow"); 

    //animate cur (which was next) 
    $('.active').animate({"width": 200}, "slow");
});

$('#prev').click(
  function() {
    var $cur = $('.active');
    var $prev = $cur.prev('.page');

    if ($prev.length == 0) return;

    $cur.removeClass('active');
    $prev.addClass('active');

    $('.page').not('.active').animate({"width": 0}, "slow");
    $('.active').animate({"width": 200}, "slow");
});

Answer 3

Check this fiddle: http://jsfiddle.net/3yrsu/1/

Added a custom attribute 'current' to keep track of your current slide. Also added a class to identify your slides easily.

HTML:

<div class="scroll">
    <div class="buttons">
        <a id="prev">prev</a>
        <a id="middle">test</a>
        <a id="nxt">next</a>
    </div>
    <div id="diva" class="slide" current="1">div AA</div>
    <div id="divb" class="slide">div BB</div>
    <div id="divc" class="slide">div CC</div>
</div>

JS:

$('#nxt').click(
function() {

    var current = $('.slide[current="1"]');
    var next = current.next('.slide');
    var prev = current.prev('.slide');
    if(next.length == 0) {
        next = $('.slide').first().insertAfter(current);
    }
    if(prev.length == 0) {
        prev = $('.slide').last().insertBefore(current);
    }

    current.animate({"width": 0}, "slow");
    next.animate({"width": 200}, "slow");
    prev.animate({"width": 0}, "slow");

    $('.slide').removeAttr('current');
    next.attr('current', "1");

});

$('#prev').click(
function() {

    var current = $('.slide[current="1"]');
    var next = current.prev('.slide');
    var prev = current.next('.slide');

    if(next.length == 0) {
        next = $('.slide').last().insertBefore(current);
    }
    if(prev.length == 0) {
        prev = $('.slide').first().insertAfter(current);
    }

    current.animate({"width": 0}, "slow");
    next.animate({"width": 200}, "slow");
    prev.animate({"width": 0}, "slow");

    $('.slide').removeAttr('current');
    next.attr('current', "1");

});