"Read More" Toggler

A basic toggler for expanding/collapsing long content.

by abbylangner

HTML

<p class="readmore">
This paragraph has the <code>class="readmore"</code> applied directly. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquet gravida volutpat. Aenean tincidunt, nulla eget auctor suscipit, dolor ipsum efficitur mi, quis suscipit orci enim ut velit. In elementum, risus non porta lobortis, lorem nunc mattis felis, convallis accumsan erat est a quam. Sed et blandit metus. Vestibulum orci ipsum, feugiat quis dignissim tincidunt, porta ut justo. Donec vel imperdiet velit. Nulla vitae nulla in metus rutrum cursus et vel dolor. Suspendisse imperdiet turpis eu turpis laoreet lobortis. Nulla sed libero turpis. Etiam at sagittis elit, at pellentesque justo. Curabitur commodo, felis id malesuada rhoncus, lectus justo lacinia dolor, ac hendrerit sem lorem ac neque. Cras vitae diam neque. Donec tincidunt massa ut varius finibus. Proin tincidunt sapien eu urna fermentum aliquet.
</p>
<div class="readmore-children">
<p>
These remaining paragraphs are inside a container which allows the browser to determine at load time whether their height is large enough to apply the <code>class="readmore"</code> dynamically.
</p>
<p>
Mauris sagittis placerat urna et ultricies. Etiam sed eleifend urna. Cras vitae dolor lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque maximus, tellus sed congue tincidunt, sem nulla hendrerit odio, ut porta erat urna eget libero. Donec varius pellentesque dolor quis molestie. Donec vitae interdum nulla.
</p>
<p>
Nunc dapibus et mauris mollis pellentesque. Donec maximus finibus urna, vitae tincidunt magna mollis eget. Cras faucibus sodales luctus. Aliquam pellentesque vulputate augue, non fermentum justo consectetur sed. Maecenas eget dictum enim, vel semper nunc. Morbi tempus quis nunc et interdum. Mauris neque dolor, auctor nec enim et, pellentesque blandit ipsum.
</p>
<p>
Mauris malesuada laoreet purus, vel gravida libero ultricies vel. Cras id felis tellus....

CSS

p {
  border: 1px solid #000000;
  border-radius: 10px;
  padding: 10px;
  width: 500px;
}

.readmore {
  position: relative;
  height: 100px;
  overflow: hidden;
}

.readmore:after {
  position: absolute;
  right: 0px;
  bottom: 0px;
  padding: 5px;
  border-radius: 5px;
  content: "...Click to Read More";
  text-decoration: underline;
  cursor: pointer;
  background: #FFFFFF;
}

.readmore.expanded {
  height: auto;
}

.readmore.expanded:after {
  content: "Click to Collapse"
}

JavaScript

$(document).ready(function(){
	$('.readmore-children').children().each(function(){
  	var c = $(this);
    if(c.height()>100){
    	c.addClass('readmore');
    }
  });
	$('.readmore').click(function(){
  	$(this).toggleClass('expanded');
  });
});