regnised,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div {
width: 100px;
height: 100px;
float: left;
border: #000000 2px solid;
}
.first {
background: #FF0000;
}
.last{
background: #008000;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$('body').on('click', 'div', function (event) {
event.preventDefault();
if (!$('div:hidden').length){
$(this).hide();
} else {
$('div:hidden').insertAfter(this).show()}
});
});
</script>
</head>
<body>
<div class='first'>1</div>
<div class='first'>2</div>
<div class='first'>3</div>
<div class='last'>4</div>
</body>
</html>