<div id="top" class="top">
  <p><strong>Something here:</strong></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum luctus lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis lacinia nisi. Praesent sed ipsum eu arcu malesuada pulvinar a ac est. Duis hendrerit lectus id sem gravida, ac posuere enim mattis. Phasellus lacinia lectus in facilisis egestas. Mauris tempus posuere metus, nec auctor sem feugiat sit amet. Sed imperdiet fringilla rutrum. Praesent quis lectus malesuada ipsum lobortis mattis quis at velit. Proin sed suscipit ligula, nec iaculis lacus. Pellentesque sapien sem, porttitor ut elit eget, rhoncus lacinia sapien. Mauris luctus vel ante vel iaculis. Etiam sapien purus, rutrum quis molestie nec, molestie id odio.</p>
</div>
<div class="wrap">
  <h1>Page Header <span class="more"><i>More</i><b>Less</b></span></h1>
  <div class="content">
    <h2>Page content here</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum luctus lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis lacinia nisi. Praesent sed ipsum eu arcu malesuada pulvinar a ac est. Duis hendrerit lectus id sem gravida, ac posuere enim mattis. Phasellus lacinia lectus in facilisis egestas. Mauris tempus posuere metus, nec auctor sem feugiat sit amet. Sed imperdiet fringilla rutrum. Praesent quis lectus malesuada ipsum lobortis mattis quis at velit. Proin sed suscipit ligula, nec iaculis lacus. Pellentesque sapien sem, porttitor ut elit eget, rhoncus lacinia sapien. Mauris luctus vel ante vel iaculis. Etiam sapien purus, rutrum quis molestie nec, molestie id odio.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum luctus lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis lacinia nisi. Praesent sed ipsum eu arcu malesuada pulvinar a ac est. Duis hendrerit lectus id sem gravida, ac posuere enim mattis. Phasellus lacinia lectus in facilisis egestas. Mauris tempus posuere metus, nec auctor sem feugiat sit amet. Sed imperdiet fringilla rutrum. Praesent quis lectus malesuada ipsum lobortis mattis quis at velit. Proin sed suscipit ligula, nec iaculis lacus. Pellentesque sapien sem, porttitor ut elit eget, rhoncus lacinia sapien. Mauris luctus vel ante vel iaculis. Etiam sapien purus, rutrum quis molestie nec, molestie id odio.</p>
  </div>
</div>

html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
html, body, .wrap {
	margin:0;
	padding:0;
	height:100%
}
html{overflow-y:scroll}
body {
	background:#666
}
.wrap, .top {
	width:100%;
	max-width:980px;
	margin:auto;
	border:1px solid #000;
	background:#ccc;
}
.wrap{display:table}
.top {
	padding:10px;
}
h1 {
	text-align:center;
	padding:1em 0;
	margin:0;
	background:#fff;
	border-bottom:2px solid #000;
	position:relative;
}
.content {
	padding:10px;
}
.more {
	position:absolute;
	left:10px;
	top:10px;
	font-weight:bold;
	cursor:pointer;
	color:blue;
	font-size:1.5rem;
}
.more:hover{color:red;}
.more i {font-style:normal;}
.more b {display:none;}
.more.active i{display:none}
.more.active b{display:block}

$(function() {
	$('#top').hide();
	$(".more").on("click", function(){
    	$(this).toggleClass('active');
		$( "#top" ).slideToggle( "slow", function() {
    		// Animation complete.
  		});
	});
});