展开jQuery阅读/阅读更少的功能

Question

尝试为文章创建“读取更多/读取更少”功能（请参阅下面的代码）。我正在使用的代码正是我所需要的......但是，我无法为此功能的更多和更少部分添加图像。当它处于“Read More”位置时，它应该是向下箭头。在“Read Less”位置时，应该有向上的箭头。

我该如何做到这一点？

$(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); 
}); 

现在的风格CSS类.more-text和.less-text。