<!-- Note: this is pretty much the same HTML structure output by WordPress" -->

<div class="archive">
	<div id="content">

		<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
			<h2 class="entry-title"><a href="#">This is a blog post</a></h2> 
			<div class="entry-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet lectus et ligula sagittis blandit a eget odio. Suspendisse auctor sollicitudin justo, accumsan volutpat neque ornare molestie. Nulla augue ligula, accumsan vitae aliquam vel, viverra a ante. Phasellus porttitor interdum eleifend. Proin ac lorem eget sem interdum congue. Aenean sodales tellus non augue condimentum, sit amet porta sapien hendrerit. Etiam gravida turpis at elit placerat aliquam. Duis mattis velit vel odio adipiscing sodales. Phasellus ac aliquet enim. Aenean quis posuere libero, sit amet convallis nisl. Vestibulum commodo tincidunt urna eu commodo. Vestibulum eleifend tempus felis, in sollicitudin odio. In lacinia hendrerit risus, elementum egestas est pretium et.</p>
			</div><!-- end .entry-content -->
		</div><!-- end .entry -->

		<div class="post type-post status-publish format-standard hentry category-uncategorized entry">
			<h2 class="entry-title"><a href="#">This is a blog post</a></h2> 
			<div class="entry-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet lectus et ligula sagittis blandit a eget odio. Suspendisse auctor sollicitudin justo, accumsan volutpat neque ornare molestie. Nulla augue ligula, accumsan vitae aliquam vel, viverra a ante. Phasellus porttitor interdum eleifend. Proin ac lorem eget sem interdum congue. Aenean sodales tellus non augue condimentum, sit amet porta sapien hendrerit. Etiam gravida turpis at elit placerat aliquam. Duis mattis velit vel odio adipiscing sodales. Phasellus ac aliquet enim. Aenean quis posuere libero, sit amet convallis nisl. Vestibulum commodo tincidunt urna eu commodo. Vestibulum eleifend tempus felis, in sollicitudin odio. In lacinia hendrerit risus, elementum egestas est pretium et.</p>
			</div><!-- end .entry-content -->
		</div><!-- end .entry -->
    
    <div class="post type-post status-publish format-standard hentry category-uncategorized entry">
			<h2 class="entry-title"><a href="#">This is a blog post</a></h2> 
			<div class="entry-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet lectus et ligula sagittis blandit a eget odio. Suspendisse auctor sollicitudin justo, accumsan volutpat neque ornare molestie. Nulla augue ligula, accumsan vitae aliquam vel, viverra a ante. Phasellus porttitor interdum eleifend. Proin ac lorem eget sem interdum congue. Aenean sodales tellus non augue condimentum, sit amet porta sapien hendrerit. Etiam gravida turpis at elit placerat aliquam. Duis mattis velit vel odio adipiscing sodales. Phasellus ac aliquet enim. Aenean quis posuere libero, sit amet convallis nisl. Vestibulum commodo tincidunt urna eu commodo. Vestibulum eleifend tempus felis, in sollicitudin odio. In lacinia hendrerit risus, elementum egestas est pretium et.</p>
			</div><!-- end .entry-content -->
		</div><!-- end .entry -->

	</div><!-- end #content -->
</div><!-- end .archive -->

body {
  background: #EFEFEF;
}

p {
  margin: 0 0 1.5em;
}
.archive {
  max-width: 400px;
  margin: 0 auto;
}

.entry {
  position: relative;
  overflow: hidden;
  margin: 30px 0;
  padding: 20px 20px 4em 20px;
  background: #FFF;
  font-family: "Open Sans", sans-serif;
  box-shadow: 0 0 15px #999;
}

.entry-title,
.entry-title a {
  margin-top: 0;
  font-family: Oswald, sans-serif;
  color: #333;
  text-decoration: none;
}

.entry-title a:hover {
  color: #555;
}

.more-link {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  padding: 8px;
  background: #555;
  color: #FFF;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 0 10px #000;
}

.more-link:hover {
  background: #5E5E5E;
}

.more-link:after {
	content: "\2193";
	margin-left: 8px;
	font-size: .8em;
}

.more-link.open:after {
	content: "\2191";
}

/* Make sure to change all $() to jQuery() if you're using directly in WordPress */

$(document).ready(function() {
  var closeHeight = '10em'; /* Default "closed" height */
	var moreText 	= 'Read More'; /* Default "Read More" text */
	var lessText	= 'Read Less'; /* Default "Read Less" text */
	var duration	= '1000'; /* Animation duration */
  var easing = 'linear'; /* Animation easing option */

	// Limit height of .entry-content div
	$('.page-template-page_blog-php #content .entry, .archive #content .entry').each(function() {
		
		// Set data attribute to record original height
		var current = $(this).children('.entry-content');
		current.data('fullHeight', current.height()).css('height', closeHeight);

		// Insert "Read More" link
		current.after('<a href="javascript:void(0);" class="more-link closed">' + moreText + '</a>');

	});
  
  // Link functinoality
	var openSlider = function() {
		link = $(this);
		var openHeight = link.prev('.entry-content').data('fullHeight') + 'px';
		link.prev('.entry-content').animate({'height': openHeight}, {duration: duration }, easing);
		link.text(lessText).addClass('open').removeClass('closed');
    	link.unbind('click', openSlider);
		link.bind('click', closeSlider);
	}

	var closeSlider = function() {
		link = $(this);
    	link.prev('.entry-content').animate({'height': closeHeight}, {duration: duration }, easing);
		link.text(moreText).addClass('closed').removeClass('open');
		link.unbind('click');
		link.bind('click', openSlider);
	}
  
  	// Attach link click functionality
	$('.more-link').bind('click', openSlider);
  
});