jqueryもっとたくさんの行を表示しますが、すべてではありません

Question

インターネットで検索しましたが、さまざまな方法でmore/lessボタンを表示するための多くのリソースがあります。

しかし、もっと読むボタンをクリックした直後にすべてのテキストを表示したくない場合は、代わりに5行のテキストを表示したいと思います。したがって、ユーザーがread moreボタンをクリックするたびに、5行以上が表示されます。

これを行う方法に関するアイデアはありますか？

Answer 1

これを試してみてください：

var step = 5; 
var initialheight = 2; 
$(document).ready(function() { 
    var currentHeight = initialheight; 
    var maxHeight = document.getElementsByClassName('content')[0].scrollHeight/12; // assuming 1em is 12px 
    $(".show-more a").on("click", function() { 
    var $this = $(this); 
    var $content = $this.parent().prev("div.content"); 
    var linkText = $this.text(); 

    if (linkText.toUpperCase() === "SHOW MORE") { 
     currentHeight += step; 
     $content.css('height', currentHeight + 'em'); 
     if (currentHeight >= maxHeight - step) { 
     linkText = "Show less"; 
     } 

    } else { 
     currentHeight -= step; 
     $content.css('height', currentHeight + 'em'); 

     if (currentHeight <= step) { 
     linkText = "Show more"; 
     } 
    }; 

    $this.text(linkText); 
    }); 
}); 

の作業例を：http://jsfiddle.net/Wpn94/1932/