protype 1

by Alexus fox

HTML

<div id="box-1" class="box">unbuckle</div>
<div id="box-2" class="box">unbuckle</div>
<div id="box-3" class="box">unbuckle</div>
<div id="box-reset" class="box">Reset</div>

CSS

.box {
  color: #FFF;
  background-color: grey;
  width: 600px;
  height: 80px;
  margin: 20px;
  padding: 10px;

}

JavaScript

box1triggered = false;
box2triggered = false;
box3triggered = false;

$('#box-1').click(function() {
	$(this).animate({
  	width: 0,
  });
  box1triggered = true;
});

$('#box-2').click(function() {
	if (box1triggered == true) {
    $(this).animate({
      width: 0,
    });
  }
  box2triggered = true;
});

$('#box-3').click(function() {
	if (box2triggered == true) {
    $(this).animate({
      width: 0,
    });
  }
  box3triggered = true;
});

$('#box-reset').click(function() {
	if (box3triggered == true && box3triggered == true && box3triggered == true) {
    $('.box').animate({
      width: 800,
    });
  }
  box1triggered = false;
  box2triggered = false;
  box3triggered = false;  
});