Posted By

designermedia on 09/11/15


Tagged

css js readmore


Versions (?)

Read More Script


 / Published in: CSS
 

URL: http://codepen.io/JoshBlackwood/pen/tDsEh

Nice little Face in for long text (slightly modified)

  1. <!--Read more JS-->
  2. <script>
  3. //If using in Wordpress
  4. window.$ = jQuery
  5.  
  6.  
  7. // Hide the extra content initially, using JS so that if JS is disabled, no problemo:
  8. $('.read-more-content').addClass('hide')
  9.  
  10. // Set up a link to expand the hidden content:
  11. .before('<a class="read-more-show" href="#"> Read More</a>')
  12.  
  13. // Set up a link to hide the expanded content.
  14. .append(' <a class="read-more-hide" href="#"> Read Less</a>');
  15.  
  16. // Set up the toggle effect:
  17. $('.read-more-show').on('click', function(e) {
  18. $(this).next('.read-more-content').slideDown('slow').removeClass('hide');
  19. $(this).addClass('hide');
  20. e.preventDefault();
  21. });
  22.  
  23. $('.read-more-hide').on('click', function(e) {
  24. $(this).parent('.read-more-content').slideUp('slow').addClass('hide').parent().children('.read-more-show').removeClass('hide');
  25. e.preventDefault();
  26. });
  27. </script>
  28. <!--/Read more JS-->

Report this snippet  

You need to login to post a comment.