číst více podle počtu znaků

by Petr Haluza

HTML

<div class="text Readmore"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sgittis, quam ligula sodales orci, congue imperdet eros tortor ac lectus. Duis eget nisl orci. Aliquam mattis purus non mauris blandit id luctus felis convallis. Integer varius egestas vestibulum. Nullam a dolor arcu, ac tempor elit. Donec. </div>

  <div class="text Readmore"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sgittis, quam ligula sodales orci, congue imperdet eros tortor ac lectus. Duis eget nisl orci. Aliquam mattis purus non mauris blandit id luctus felis convallis. Integer varius egestas vestibulum. Nullam a dolor arcu, ac tempor elit. Donec. </div>
  
    <div class="text Readmore"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sgittis, quam ligula sodales orci, congue imperdet eros tortor ac lectus. Duis eget nisl orci. Aliquam mattis purus non mauris blandit id luctus felis convallis. Integer varius egestas vestibulum. Nullam a dolor arcu, ac tempor elit. Donec. </div>

CSS

.RM-moreText span {
	display: none;
}
.RM-toggler {
    color: #0098d9;
}

JavaScript

$(document).ready(function() {
	var showChar = 50;
	var dots = "...";
	var moretext = "Číst více";
	var lesstext = "méně";
	$('.Readmore').each(function() {
		var content = $(this).html();

		if(content.length > showChar) {

			var c = content.substr(0, showChar);
			var h = content.substr(showChar-1, content.length - showChar);

			var html = c + '<span class="RMdots">'+dots+'</span>&nbsp;<span class="RM-moreText"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="RM-toggler">'+moretext+'</a></span>';

			$(this).html(html);
		}

	});

	$(".RM-toggler").click(function(){
		if($(this).hasClass("less")) {
			$(this).removeClass("less");
			$(this).html(moretext);
		} else {
			$(this).addClass("less");
			$(this).html(lesstext);
		}
		$(this).parent().prev().toggle();
		$(this).prev().toggle();
		return false;
	});
});