JSFiddle - React, Tailwind, and code Playground

by paffffff

HTML

<section>  
		<div class="descr">
			<div class="mincontent">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рот, свое, его, города, снова от всех приставка то свой наш рыбными деревни безорфографичный большого даль обеспечивает семь парадигматическая? Власти даже по всей там путь. Свой, лучше, lorem, буквоград буквенных безопасную которой приставка за там свое переулка семь возвращайся заглавных если рот она переписывается всеми единственное ipsum предложения дороге пустился даже прямо. Злых, о имеет щеке снова если залетают рот своих переписывается взгляд одна скатился инициал домах страна единственное гор использовало свой сих реторический. Вопроса, парадигматическая текстов свое запятой от всех продолжил всемогущая пустился взобравшись текста. Продолжил, первую, ipsum, деревни, свой жизни ему но они переулка правилами скатился осталось семь маленький до наш решила путь большой заманивший. Наш раз имеет что повстречался вопроса первую продолжил толку пор языкового свою! Встретил, за ее он по всей страну эта себя. Назад, они коварный языком своих. Своих, его, последний о сбить языкового агенство предупредила жаренные? Раз, но!</div>
		</div>
		<div class="descr">
			<div class="mincontent">Дорогу, предупредила, рекламных, выйти, переписывается домах о подпоясал запятой предупреждал речью правилами журчит великий. Над, выйти, алфавит, предупреждал жизни большого журчит наш инициал всеми до сбить снова своего текстов оксмокс напоивший приставка текста букв! Рыбными, послушавшись предложения всемогущая образ необходимыми большой несколько однажды алфавит гор вдали парадигматическая домах оксмокс она лучше даже диких это языком снова единственное сбить решила маленький грамматики силуэт там подпоясал! Запятой, деревни, имеет большой журчит над свой ручеек оксмокс приставка предложения своего себя lorem залетают его путь правилами предупредила запятых наш ее алфавит до использовало заманивший вершину коварных назад но пояс...

CSS

/*стили, относящиея к делу*/
.mincontent {
    overflow: hidden;
}
.mincontent.minimize {
    overflow: hidden;
    position: relative;
}
.minimize-wrapper {
    margin-bottom: 20px;
}

JavaScript

jQuery(document).ready(function($) {

			(function($) {
				// Плагин для сворачивания лишнего текста в блоке
				$.fn.minText = function(options) {	

				  if (!this.length) {return this;}

				  var opts = $.extend({}, $.fn.minText.defaults, options);
				
				  this.each(function() {
				    var $this = $(this);
				    var curHeight = $this.height();

				    if (curHeight > opts.sHeight) {
						$this
						.height(opts.sHeight)
						.addClass('minimize')
						.wrap('<div class="'+opts.wrapClass+'" />');

						$this.after('<div class="minmax"><span>'+opts.expandText+'</span></div>');

						$('body').on('click', '.minmax span', function(e) {
							var thisParent = $(this).parent().prev();
							var thisText = $(this);
							if (thisParent.hasClass('minimize')) {
								thisParent.animate({
									height: curHeight
								},
									500, 
									function() {
										thisParent.removeClass('minimize');
										thisText.text(opts.collapseText);
									}
								);
							} else {
								thisParent.animate({
									height: opts.sHeight
								},
									500, 
									function() {
										thisParent.addClass('minimize');
										thisText.text(opts.expandText);
									}
								);
							};
						});
					};
				  });
				
				  return this;
				};
				
				// default options
				$.fn.minText.defaults = {
				  sHeight: 96,
				  wrapClass: 'minimize-wrapper',
				  collapseText: 'Свернуть',
				  expandText: 'Развернуть'
				};
				
			})(jQuery);
				

			// Инициализация плагина
			$('.mincontent').minText();

		});