ernstki/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Appearing/disappearing message box with CSS transitions only" />
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
.box {
  border: 1px solid black;
  height: 5em;
  padding: 10px;
}

.box h4 {
  height: 1em;
  padding: 0;
  margin: 0;
}

.shown {
  /* The message box needs to have a fixed height (and probably
     some kind of way of handling overflow) if you want to
     animate on height. Ems and 'auto's don't seem to work.
     You could create a node, add it invisibly to the DOM to
     check its height, but that's JavaScript territory. */

  /* The transition on visibility is necessary to prevent the
     transparent elements from preventing click-through to the
     other page elements (on Firefox, anyway). */

  transition:
    opacity 0.5s linear,
    height 0.2s linear,
    visibility 0.2s linear;

  opacity: 1;
  height: 5em;
  visibility: visible;
}

.hidden {
  transition:
    opacity 0.2s linear,
    height 0.5s linear,
    visibility 0.2s linear;
  opacity: 0;
  height: 0;
  visibility: hidden;
}
</style>
</head>
<body>
  <p>Some content before</p>
  <div id="message" class="box shown">
    <h4>Error!</h4>
    <p>You've made an error.</p>
  </div>
  <p>Some other content after</p>
  <button id="toggle">Toggle visibility</button>
<script id="jsbin-javascript">
var msg = document.getElementById('message');
var btn = document.getElementById('toggle');

btn.onclick = function(e) {
  if (msg.classList.contains('shown')) {
    msg.classList.remove('shown');
    msg.classList.add('hidden');
  } else {
    // Show the message
    msg.classList.remove('hidden');
    msg.classList.add('shown');
  }
};
</script>


<script id="jsbin-source-css" type="text/css">.box {
  border: 1px solid black;
  height: 5em;
  padding: 10px;
}

.box h4 {
  height: 1em;
  padding: 0;
  margin: 0;
}

.shown {
  /* The message box needs to have a fixed height (and probably
     some kind of way of handling overflow) if you want to
     animate on height. Ems and 'auto's don't seem to work.
     You could create a node, add it invisibly to the DOM to
     check its height, but that's JavaScript territory. */

  /* The transition on visibility is necessary to prevent the
     transparent elements from preventing click-through to the
     other page elements (on Firefox, anyway). */

  transition:
    opacity 0.5s linear,
    height 0.2s linear,
    visibility 0.2s linear;

  opacity: 1;
  height: 5em;
  visibility: visible;
}

.hidden {
  transition:
    opacity 0.2s linear,
    height 0.5s linear,
    visibility 0.2s linear;
  opacity: 0;
  height: 0;
  visibility: hidden;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var msg = document.getElementById('message');
var btn = document.getElementById('toggle');

btn.onclick = function(e) {
  if (msg.classList.contains('shown')) {
    msg.classList.remove('shown');
    msg.classList.add('hidden');
  } else {
    // Show the message
    msg.classList.remove('hidden');
    msg.classList.add('shown');
  }
};</script></body>
</html>

## jsbin.yoyada.css
.box {
  border: 1px solid black;
  height: 5em;
  padding: 10px;
}

.box h4 {
  height: 1em;
  padding: 0;
  margin: 0;
}

.shown {
  /* The message box needs to have a fixed height (and probably
     some kind of way of handling overflow) if you want to
     animate on height. Ems and 'auto's don't seem to work.
     You could create a node, add it invisibly to the DOM to
     check its height, but that's JavaScript territory. */

  /* The transition on visibility is necessary to prevent the
     transparent elements from preventing click-through to the
     other page elements (on Firefox, anyway). */

  transition:
    opacity 0.5s linear,
    height 0.2s linear,
    visibility 0.2s linear;

  opacity: 1;
  height: 5em;
  visibility: visible;
}

.hidden {
  transition:
    opacity 0.2s linear,
    height 0.5s linear,
    visibility 0.2s linear;
  opacity: 0;
  height: 0;
  visibility: hidden;
}

## jsbin.yoyada.js
var msg = document.getElementById('message');
var btn = document.getElementById('toggle');

btn.onclick = function(e) {
  if (msg.classList.contains('shown')) {
    msg.classList.remove('shown');
    msg.classList.add('hidden');
  } else {
    // Show the message
    msg.classList.remove('hidden');
    msg.classList.add('shown');
  }
};
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Appearing/disappearing message box with CSS transitions only" />
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.box {
	border: 1px solid black;
	height: 5em;
	padding: 10px;
	}

	.box h4 {
	height: 1em;
	padding: 0;
	margin: 0;
	}

	.shown {
	/* The message box needs to have a fixed height (and probably
	some kind of way of handling overflow) if you want to
	animate on height. Ems and 'auto's don't seem to work.
	You could create a node, add it invisibly to the DOM to
	check its height, but that's JavaScript territory. */

	/* The transition on visibility is necessary to prevent the
	transparent elements from preventing click-through to the
	other page elements (on Firefox, anyway). */

	transition:
	opacity 0.5s linear,
	height 0.2s linear,
	visibility 0.2s linear;

	opacity: 1;
	height: 5em;
	visibility: visible;
	}

	.hidden {
	transition:
	opacity 0.2s linear,
	height 0.5s linear,
	visibility 0.2s linear;
	opacity: 0;
	height: 0;
	visibility: hidden;
	}
	</style>
	</head>
	<body>
	<p>Some content before</p>
	<div id="message" class="box shown">
	<h4>Error!</h4>
	<p>You've made an error.</p>
	</div>
	<p>Some other content after</p>
	<button id="toggle">Toggle visibility</button>
	<script id="jsbin-javascript">
	var msg = document.getElementById('message');
	var btn = document.getElementById('toggle');

	btn.onclick = function(e) {
	if (msg.classList.contains('shown')) {
	msg.classList.remove('shown');
	msg.classList.add('hidden');
	} else {
	// Show the message
	msg.classList.remove('hidden');
	msg.classList.add('shown');
	}
	};
	</script>


	<script id="jsbin-source-css" type="text/css">.box {
	border: 1px solid black;
	height: 5em;
	padding: 10px;
	}

	.box h4 {
	height: 1em;
	padding: 0;
	margin: 0;
	}

	.shown {
	/* The message box needs to have a fixed height (and probably
	some kind of way of handling overflow) if you want to
	animate on height. Ems and 'auto's don't seem to work.
	You could create a node, add it invisibly to the DOM to
	check its height, but that's JavaScript territory. */

	/* The transition on visibility is necessary to prevent the
	transparent elements from preventing click-through to the
	other page elements (on Firefox, anyway). */

	transition:
	opacity 0.5s linear,
	height 0.2s linear,
	visibility 0.2s linear;

	opacity: 1;
	height: 5em;
	visibility: visible;
	}

	.hidden {
	transition:
	opacity 0.2s linear,
	height 0.5s linear,
	visibility 0.2s linear;
	opacity: 0;
	height: 0;
	visibility: hidden;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var msg = document.getElementById('message');
	var btn = document.getElementById('toggle');

	btn.onclick = function(e) {
	if (msg.classList.contains('shown')) {
	msg.classList.remove('shown');
	msg.classList.add('hidden');
	} else {
	// Show the message
	msg.classList.remove('hidden');
	msg.classList.add('shown');
	}
	};</script></body>
	</html>