ryan-blunden/gist:1498586

## gistfile1.html
<!doctype html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >

	<title>Slide Up using CSS3 Transitions</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Ryan Blunden">

    <style type="text/css">
        body {
            font: 12px Helvetica;
        }

        .container {
            width: 960px;
            background: #e9e9e9;
            border: 2px solid #ccc;
            margin: 24px auto;
            position: relative;
            height: 600px;
        }

        .content {
            overflow: hidden;
            padding: 0 12px;
        }

        h1 {
            background: #333;
            color: #fff;
            margin: 0 0 1em 0;
            font-size: 20px;
            padding: 12px;
        }

        .toggleBox {
            position: absolute;
            top: 16px;
            right: 12px;
            color: #fff;
        }

        .box {
            position: relative;
            margin: 0 auto;
            width: 400px;
            height: 100px;
            border: 1px solid #ccc;
            background: #d9d9d9;
            padding: 12px;

            -webkit-transition-property: height, opacity;
            -webkit-transition-duration: 0.7s;
        }

        .box .deactivate {
            position: absolute;
            bottom: 10px;
            right: 10px;
            font-size: 10px;
        }

        .deactivated {
            height: 0;
            opacity: 0;
        }

        /* Hack for old IE */
        .ie6 .deactivated, .ie7 .deactivated, .ie8 .deactivated  {
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>CSS Transitions Testing</h1>
    <a href="#" class="toggleBox">toggle box</a>
    <div class="content">
        <p>
            Often, we use JavaScript to directly change the presentational properties of elements (for example, $('.box).slideUp()). These presentational properties (for example, the hiding or revealing of an element) belong in CSS.
            Using CSS 3 transitions, we can make this happen.
        </p>
        <p>
            This means if a requirement arose to change how the box was to hide and reveal, we only need to change the CSS, not the JavaScript.
        </p>

        <div class="box activated">
            Hello, I am content
            <a href="#" class="deactivate">hide</a>
        </div>

        <h2>A sub-heading</h2>
        <p>
            More awesome content...
        </p>
    </div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
    $('.deactivate, .toggleBox').bind('click', function() {
        $('.box').toggleClass('deactivated');
    });
</script>
</body>
</html>
	<!doctype html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >

	<title>Slide Up using CSS3 Transitions</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Ryan Blunden">

	<style type="text/css">
	body {
	font: 12px Helvetica;
	}

	.container {
	width: 960px;
	background: #e9e9e9;
	border: 2px solid #ccc;
	margin: 24px auto;
	position: relative;
	height: 600px;
	}

	.content {
	overflow: hidden;
	padding: 0 12px;
	}

	h1 {
	background: #333;
	color: #fff;
	margin: 0 0 1em 0;
	font-size: 20px;
	padding: 12px;
	}

	.toggleBox {
	position: absolute;
	top: 16px;
	right: 12px;
	color: #fff;
	}

	.box {
	position: relative;
	margin: 0 auto;
	width: 400px;
	height: 100px;
	border: 1px solid #ccc;
	background: #d9d9d9;
	padding: 12px;

	-webkit-transition-property: height, opacity;
	-webkit-transition-duration: 0.7s;
	}

	.box .deactivate {
	position: absolute;
	bottom: 10px;
	right: 10px;
	font-size: 10px;
	}

	.deactivated {
	height: 0;
	opacity: 0;
	}

	/* Hack for old IE */
	.ie6 .deactivated, .ie7 .deactivated, .ie8 .deactivated {
	display: none;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>CSS Transitions Testing</h1>
	<a href="#" class="toggleBox">toggle box</a>
	<div class="content">
	<p>
	Often, we use JavaScript to directly change the presentational properties of elements (for example, $('.box).slideUp()). These presentational properties (for example, the hiding or revealing of an element) belong in CSS.
	Using CSS 3 transitions, we can make this happen.
	</p>
	<p>
	This means if a requirement arose to change how the box was to hide and reveal, we only need to change the CSS, not the JavaScript.
	</p>

	<div class="box activated">
	Hello, I am content
	<a href="#" class="deactivate">hide</a>
	</div>

	<h2>A sub-heading</h2>
	<p>
	More awesome content...
	</p>
	</div>
	</div>

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
	<script type="text/javascript">
	$('.deactivate, .toggleBox').bind('click', function() {
	$('.box').toggleClass('deactivated');
	});
	</script>
	</body>
	</html>