Question

i am trying to animate a div, what i need is when click a button i want to hide a div and show another div that is next child.

here is my fiddle.

I am trying to do like this this site here you can see when you click the learmore link which is in the top-right hand side then another div content open like sliding.

Answer 1

DEMO jsBin

var c=0;
$('.slide:gt(0)').hide();
$('#learn').click(function(){
  c++;
  $('.slide').eq(c).css({zIndex:c}).show('slow');
});

HTML:

  <div id="slider">
    <div id="learn">Learn more</div>
    <div class="slide s1">I'm slide 1</div>
    <div class="slide s2">I'm slide 2</div>
    <div class="slide s3">I'm slide 3</div>
  </div>

CSS:

  #slider{
    position:relative;
    width:340px;
    height:340px;
  }
  #learn{
    position:absolute;
    right:0px;
    z-index:2;          /*set a higher Z-index if you have more slides*/
    cursor:pointer;
  }
  .slide{
    position:absolute;
    right:0px;         /*important!! To 'slide' from right to left*/
    top:0px;           
    width:300px;
    height:300px;
  }

If you have a defined number of slides you can keep the code intact, in the other hand I’d suggest you to – when the last slide is reached – hide the #learn programatically with jQuery. Let me know if you need help with that one.

Happy coding