Pachira 1

by Brendan Dolan

HTML

<div class="wrapper">
  <div class="div div-1">
    DIV 1
    <div class="next"></div>
  </div>
  <div class="div div-2" style="display:none;">
    DIV 2
    <button class="back">Back</button>
    <div class="next"></div>
  </div>
  <div class="div div-3" style="display:none;">
    DIV 3
    <button class="back">Back</button>
    <div class="next"></div>
  </div>
  <div class="div div-4" style="display:none;">
    DIV 4
    <button class="back">Back</button>
  </div>
</div>

CSS

.wrapper {
  position: relative;
  width: 200px;
  height: 300px;
}

.div {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.div-1 {
  background-color: blue;
}

.div-2 {
  background-color: red;
}

.div-3 {
  background-color: yellow;
}

.div-4 {
  background-color: green;
}

.next {
  width: 100%;
  height: 100%;
  z-index: 2;
}

.back {
  z-index: 9999;
}

JavaScript

$('.next').click(function() {
  $(this).parent().fadeOut( 1000 ).next().fadeIn( 1000 ); //hide parent and show next
});

$('.back').click(function() {
  $(this).parent().fadeOut( 1000 ).prev().fadeIn( 1000 ); //hide parent and show previous
});