jquery zeigen mehr Linien, aber nicht alle

Question

Ich suchte im Internet und es gibt viele Ressourcen für Show mehr/weniger Knopf mit verschiedenen Methoden.

Ich möchte jedoch nicht den gesamten Text sofort nach dem Klicken auf die Schaltfläche Lesen mehr anzeigen, ich möchte stattdessen 5 Zeilen mehr Text zeigen. Wenn der Benutzer also auf die Schaltfläche "Mehr lesen" klickt, werden 5 Zeilen mehr angezeigt.

Irgendwelche Ideen, wie man das macht?

Answer 1

Versuchen Sie folgendes:

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

Arbeitsbeispiel: http://jsfiddle.net/Wpn94/1932/