Hide Style Example

by _sir

HTML

<div class="container this-space">
  This is an example of the iframe you want to hide.
</div>

<div class="container other-content hidden-BAD">
  This is some other content we don't want to be pushed around.
</div>

<button id="show">Show Frame</button>
<button id="badHide">"Bad" hide</button>
<button id="goodHide">"Good" hide</button>

<hr>
<p>
Use the following styles, listed in the <code>hidden-GOOD</code> example:
</p>

<code class="codeblock">
.hide-iframe {
  visibility: hidden;
  z-index: -1;
  position: absolute;
  pointer-events: none;
}
</code>

<p>
Using <code>display: none;</code> causes compatibility issues with some style calculations in Firefox. Use <code>visbility: hidden;</code> and the other settings above to achieve the same effect.
</p>

CSS

.container {
  margin: 1em 0;
  padding: 2em;
  width: 300px,
  height: 200px;
  border: 1x solid black;
  background: white;
}

.this-space {
  background: tan;
}

.hidden-BAD {
  display:none;
}

.hidden-GOOD {
  visibility: hidden;
  z-index: -1;
  position: absolute;
  pointer-events: none;
}

code {
  font-weight: bold;
}

.codeblock {
  display: block;
  white-space: pre;
  padding-left: 2em;
}

p {
  margin: 1em 0;
}

body { 
  padding: 1em;
}

JavaScript

var $one = $('.this-space'),
	$two = $('.other-content');

$('#badHide').on('click', function(){
	$one.removeClass('hidden-GOOD').addClass('hidden-BAD');
  $two.removeClass('hidden-BAD');
});

$('#goodHide').on('click', function(){
	$one.removeClass('hidden-BAD').addClass('hidden-GOOD');
  $two.removeClass('hidden-BAD');
});

$('#show').on('click', function(){
	$one.removeClass('hidden-BAD hidden-GOOD');
  $two.addClass('hidden-BAD');
});