Skip to content
  • Unwatch
  • Fork



SSH clone URL

Subversion checkout URL

You can clone with HTTPS, SSH, or Subversion.

Clone in Desktop Download ZIP
tree: 869f534ade
Fetching contributors…

Cannot retrieve contributors at this time

27 lines (26 sloc) 1.125 kb
<!DOCTYPE html>
<title>Creating interactive expandable boxes using CSS: fade effects</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
* {font-size: 100%; font-family: sans-serif;}
.show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.tran1 {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
#secret {opacity: 0;}
.hide:focus ~ #secret {opacity: 1}
<h1>Creating interactive expandable boxes using CSS</h1>
<h2>Fade effects</h2>
<p><a href="css-menu-ex3.html#" class="hide">[show]</a><a href="css-menu-ex3.html#" class="show">[hide]</a> <span id="secret" class="tran1">Peekaboo!<br />I know this isn't really a menu. But it's the same mechanism, and shows off the pretty fade! Notice that this works in the opposite direction to the other switches: I simply changed the classes around on the toggle.</span></p>
Jump to Line
Something went wrong with that request. Please try again.