Advanced Search

Return to Snippet

Revision: 69808
at September 11, 2015 02:03 by designermedia
Initial Code 
<!--Read more JS-->
<script>
//If using in Wordpress
window.$ = jQuery


// Hide the extra content initially, using JS so that if JS is disabled, no problemo:
$('.read-more-content').addClass('hide')

// Set up a link to expand the hidden content:
.before('<a class="read-more-show" href="#"> Read More</a>')

// Set up a link to hide the expanded content.
.append(' <a class="read-more-hide" href="#"> Read Less</a>');

// Set up the toggle effect:
$('.read-more-show').on('click', function(e) {
$(this).next('.read-more-content').slideDown('slow').removeClass('hide');
$(this).addClass('hide');
e.preventDefault();
});

$('.read-more-hide').on('click', function(e) {
$(this).parent('.read-more-content').slideUp('slow').addClass('hide').parent().children('.read-more-show').removeClass('hide');
e.preventDefault();
});
</script>
<!--/Read more JS-->
Initial URL 
http://codepen.io/JoshBlackwood/pen/tDsEh
Initial Description 
Nice little Face in for long text (slightly modified)
Initial Title 
Read More Script
Initial Tags 
css, js
Initial Language 
CSS