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