Advanced Search

Read More Script

/ Published in: CSS
Save to your folder(s)
Nice little Face in for long text (slightly modified)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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-->

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.