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 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");
});