Read More Toggle

index.html

<article>
  <h1>Default 'Read More' text</h1>
  <p>Egestas mollitia quos metus natus assumenda ullam suscipit ultricies. Voluptas, nihil natoque elementum error ligula exercitationem aliquid tempor mauris penatibus. Suspendisse! Rutrum volutpat adipiscing nascetur cras conubia cupidatat! Pede voluptatibus tristique adipiscing, eleifend vestibulum, deleniti sit repudiandae temporibus esse hic! Primis phasellus ut vestibulum pellentesque condimentum laboris sed? Molestie torquent, occaecati natoque, quisque nostra sunt, nibh, consequuntur turpis eros aut justo qui recusandae eos, soluta repellat ipsa tortor tempus ultrices dis, unde voluptates venenatis placeat praesent suscipit maxime, lacus eleifend? Iste nisi fermentum! Corporis accusamus dictum! Sapien laboris massa fugit deserunt laboriosam mi consectetur curabitur cum.</p>
 
  <div data-readmore>
    <p>Mollitia quos metus natus assumenda ullam suscipit ultricies. Voluptas, nihil natoque elementum error ligula exercitationem aliquid tempor mauris penatibus. Suspendisse! Rutrum volutpat adipiscing nascetur cras conubia cupidatat! Pede voluptatibus tristique adipiscing, eleifend vestibulum, dolore, eveniet facilis ipsa.</p>
    
    <p>Aliquid tempor mauris penatibus. Suspendisse! Rutrum volutpat adipiscing nascetur cras conubia cupidatat! Pede voluptatibus tristique adipiscing, eleifend vestibulum, dolore, eveniet facilis ipsa, deleniti sit repudiandae temporibus esse hic! Primis phasellus ut vestibulum.</p>
  </div>
  
</article>

<article>
  <h1>Customized open/close-text options</h1>
  <p>Suspendisse! Rutrum volutpat adipiscing nascetur cras conubia cupidatat! Pede voluptatibus tristique adipiscing, eleifend vestibulum, dolore, eveniet facilis ipsa, deleniti sit repudiandae temporibus esse hic! Primis phasellus ut vestibulum pellentesque condimentum laboris sed? Molestie torquent, occaecati natoque, quisque nostra sunt, nibh, consequuntur turpis eros aut justo qui recusandae eos, soluta repellat ipsa tortor tempus ultrices dis, unde voluptates venenatis placeat praesent suscipit maxime, lacus eleifend? Iste nisi fermentum! Corporis accusamus dictum! Sapien laboris massa fugit deserunt laboriosam mi consectetur curabitur cum.</p>
 
  <div data-readmore data-open-text="Open" data-close-text="Close">
    <p>Egestas mollitia quos metus natus assumenda ullam suscipit ultricies. Voluptas, nihil natoque elementum error ligula exercitationem aliquid tempor mauris penatibus. Suspendisse! Rutrum volutpat adipiscing nascetur  laboris sed? Molestie torquent, occaecati natoque, quisque nostra sunt, nibh, consequuntur turpis eros aut justo qui recusandae eos, soluta repellat ipsa tortor tempus ultrices dis, unde voluptates venenatis placeat praesent suscipit maxime, lacus eleifend? Iste nisi fermentum! Corporis accusamus dictum! Sapien laboris massa fugit deserunt laboriosam mi consectetur curabitur.</p>
    
    <p>Egestas mollitia quos metus natus assumenda ullam suscipit ultricies. Voluptas, nihil natoque elementum error ligula exercitationem aliquid tempor mauris penatibus. Suspendisse! Rutrum volutpat adipiscing.</p>
  </div>
  
</article>

<article>
  <h1>Empty close-text option</h1>
  <p>Primis phasellus ut vestibulum pellentesque condimentum laboris sed? Molestie torquent, occaecati natoque, quisque nostra sunt, nibh, consequuntur turpis eros aut justo qui recusandae eos, soluta repellat ipsa tortor tempus ultrices dis, unde voluptates venenatis placeat praesent suscipit maxime, lacus eleifend? Iste nisi fermentum! Corporis accusamus dictum! Sapien laboris massa fugit deserunt laboriosam mi consectetur curabitur cum.</p>
 
  <div data-readmore data-open-text="Show me more!" data-close-text="">
    <p>Egestas mollitia quos metus natus assumenda ullam suscipit ultricies. Voluptas, nihil natoque elementum error ligula exercitationem aliquid tempor mauris penatibus. Suspendisse! Rutrum volutpat adipiscing nascetur  laboris sed? Molestie torquent.</p>
    
    <p>Egestas mollitia quos metus natus assumenda ullam suscipit ultricies. Voluptas, nihil natoque elementum error ligula exercitationem aliquid tempor mauris penatibus. Suspendisse! Rutrum volutpat adipiscing.</p>
  </div>
  
</article>

<article>
  <h1>Question-Answer application</h1>
  <p><strong>Question</strong>: Do you want to see the answer?</p>
 
  <div data-readmore data-open-text="Reveal Answer" data-close-text="Hide Answer">
    <p><strong>Answer</strong>: Yes. Yes you do.</p>
  </div>
  
</article>

Read More Toggle.markdown

Read More Toggle

I wanted to create a simple, jQuery-only, solution for a flexible 'Read/Show More' link solution. The minimum requirements in your markup are simply to wrap your hidden/extended content in a div with a data-readmore attribute. You can customize the text using the data-open-text and data-close-text attributes.

A Pen by David Angel on CodePen.

License.

script.js

$('div[data-readmore]').hide().each(function() {
  var open_text = $(this).data('open-text');
  open_text = typeof open_text !== 'undefined' ? open_text : 'Read More';
  $(this).before('<a data-readmore-toggle href="#">' + open_text + '</a>');
});

$('[data-readmore-toggle]').click(function(e) {
  e.preventDefault();
  
  var open_text = $(this).siblings('div[data-readmore]').data('open-text');
  var close_text = $(this).siblings('div[data-readmore]').data('close-text');
  
  if(typeof open_text == 'undefined') {open_text = "Read More"}
  if(typeof close_text == 'undefined') {close_text = "Read Less"}
  
  if($(this).text() == open_text) {
    $(this).html(close_text).next('div[data-readmore]').show().after(this);
  } else {
    $(this).html(open_text).prev('div[data-readmore]').hide().before(this);
  }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

/*
No separate CSS required.
Usage: <div data-readmore>CONTENT</div>
Optional data-open-text and data-close-text attributes can change the open/close text (including blank strings)
*/

body {
  font-family: sans-serif;
  background: #d9eaf6;
  margin: 50px;
  font-size: 14px
}