Как скрыть элементы или текст с кнопкой "Показать все"

Два небольших скрипта для вашего сайта, которые скрывают элементы или текст с кнопкой "Показать все". При клике на кнопку, она убирается, а текст или элементы показываются полностью.

1. Скрыть html элементы, если их больше, чем указанное число. Не текст, элементы! типа li, diiv, span, a.
Добавить в ваш js файл

$(document).ready(function(){
	$('[data-visibleItems]').each(function(){
		var cnt = $(this), count = cnt.attr('data-visibleItems'), items = cnt.children(), 
		total = items.length, hdn = items.slice(count), idx = cnt.index() + 1;
		if (total > count) {
			cnt.append('<button class="show-items show-items--'+idx+'">Показать все ('+total+')</button>');
			hdn.css('display','none');
			var showBtn = cnt.find('.show-items');
			showBtn.click(function(){
				$(this).remove();
				hdn.removeAttr('style');
			});
		};
	});
});

В тпл

				<div data-visibleItems="3">что скрываем</div>

2. Обрезать текст с троеточием, если количество знаков превышает указанное. Предназначено для небольших текстов, типа список озвучек. Только текстовое содержимое!
Добавить в ваш js файл

$(document).ready(function(){
	$('[data-truncate]').each(function(){
		var cnt = $(this), count = cnt.attr('data-truncate'), txt = cnt.text(), 
		total = txt.length, vis = txt.slice(0,count), idx = cnt.index() + 1;
		if (total > count) {
			cnt.html(vis + '... <button class="show-text show-text--'+idx+'">Показать все</button>');
			var showBtn = cnt.find('.show-text');
			showBtn.click(function(){
				$(this).remove();
				cnt.html(txt);
			});
		};
	});
});

в тпл

<div data-truncate="30">Экшен, Приключения, Фэнтези, Боевые искусства</div>

или пример из шаблона, обратите внимание, внутри только текст.

<li><span>Жанр:</span> <span data-truncate="30">Экшен, Приключения, Фэнтези, Боевые искусства</span></li>

пример css кнопок

.show-items, .show-text {height: 20px; padding: 0 10px; font-weight: 400; font-size: 12px;}
.show-text {display: inline; height: auto; padding: 0; color: var(--accent); background: none; text-decoration: underline;}

также у каждой кнопки добавляется свой уникальный класс типа show-text--3, с помощью которого можно отдельно оформить. Как узнать класс: правой кнопкой по кнопке "показать все" - показать код элемента.