Button Clicker

by Sam Fereday

HTML

<button>
Click
</button>
<div class="container">
  <div class="a">fgh fgh dfgh </div>
  <div class="b">dfg hdf ghfghfg</div>
</div>

CSS

.a, .b {
  width: 10em;
  height: 10em;
  display: none;
}

.container {
  position: relative;
  padding: 2em;
}

.a {
  background: orange;
}

.b {
  background: red;
  width: 5em;
  height: 5em;
}

JavaScript

a = $('.a'),
b = $('.b'),
button = $('button'),
toggle = 1;

function clicker()
{

	toggle *= -1;
  
  if(toggle > 0) {
  	
    console.log(a);
    a.stop().fadeIn('fast', function(){
    		$(this).css({"position":"static"});
    });
    b.stop().css({"position":"absolute"}).fadeOut('fast');
  
  } else {
  
  	console.log(b);
  	b.stop().fadeIn('fast', function(){
    		$(this).css({"position":"static"});
    });
  	a.stop().css({"position":"absolute"}).fadeOut('fast');
  
  }

}

button.click(clicker);
clicker();