Question

Trying to create a ‘read more/read less’ function to an article (see below for code). The code I’m using is exactly what I need… however, I’m unable to add an image for both the more and less portion of this function. When it’s at the ‘Read More’ position it should be an down arrow. And when at the ‘Read Less’ position it should have the up arrow.

How would I be able to accomplish this?

$(document).ready(function() {

// The height of the content block when it's not expanded
var adjustheight = 80;
// The "more" link text
var moreText = "More";
// The "less" link text
var lessText = "Less";

// Sets the .more-block div to the specified height and hides any content that overflows
$(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');

// The section added to the bottom of the "more-less" div
$(".more-less").append('<a href="#" class="adjust is-more"></a>');

$("a.adjust").text(moreText);

$(".adjust").toggle(function() {
    $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
    $(this).text(lessText);
  }, function() {
    $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
    $(this).text(moreText);
});

});

Answer 1

$("a.adjust").addClass('more-text').text(moreText);    
$(".adjust").toggle(function() {
    $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
    $(this).addClass('less-text').removeClass('more-text').text(lessText);
  }, function() {
    $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
    $(this).addClass('more-text').removeClass('less-text').text(moreText);
});

And now style css classes .more-text and .less-text.