pasberth/main.html

## main.html
<html>
<head>
    <meta charset="utf-8">
    <title>Example</title>
    <script src="http://code.jquery.com/jquery-2.0.3.js"></script>
    <script>
jQuery(function ($) {
  $(".bg").bind("click", function () {
    $(".fg").add("#show").add("#hide").toggleClass("showing hiding");
  });
});
    </script>

    <style>
.bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.fg {
    position: absolute;
    top: 25%;
    left: 25%;
    z-index: 1;
    width: 50%;
    height: 50%;
    background-color: silver;
}

.showing {
    display: block;
}

.hiding {
    display: none;
}
    </style>
</head>
<body>

  <div class="bg">
    <span id="show" class="showing">Click to hide the table</span>
    <span id="hide" class="hiding">Click to show the table</span>
  </div>

  <div class="fg showing">
  </div>
</body>
</html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Example</title>
	<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
	<script>
	jQuery(function ($) {
	$(".bg").bind("click", function () {
	$(".fg").add("#show").add("#hide").toggleClass("showing hiding");
	});
	});
	</script>

	<style>
	.bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	}

	.fg {
	position: absolute;
	top: 25%;
	left: 25%;
	z-index: 1;
	width: 50%;
	height: 50%;
	background-color: silver;
	}

	.showing {
	display: block;
	}

	.hiding {
	display: none;
	}
	</style>
	</head>
	<body>

	<div class="bg">
	<span id="show" class="showing">Click to hide the table</span>
	<span id="hide" class="hiding">Click to show the table</span>
	</div>

	<div class="fg showing">
	</div>
	</body>
	</html>