jQuery 확장 더 읽기/적은 함수 읽기

Question

기사에 '더 읽기/더 적은 읽기'기능을 만들려고합니다 (코드는 아래 참조). 내가 사용하고있는 코드는 정확히 내가 필요한 것입니다 ... 그러나, 나는이 함수의 더 많은 부분과 적은 부분에 대한 이미지를 추가 할 수 없습니다. '자세히보기'위치에 있으면 아래쪽 화살표 여야합니다. 그리고 '덜 읽기'위치에있을 때 위쪽 화살표가 있어야합니다.

어떻게이 작업을 수행 할 수 있습니까?

$(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.