jQuery: Показать-скрыть элемент, развернуть-свернуть под кат

Задача. На сайте есть блок с плиткой тегов, который имеет на разных страницах различное количество элементов. Когда этих элементов много и они не помещаются в одну строку, нужно под блоком добавить кнопу «развернуть-свернуть» — Пример 1.

jQuery— набор функций JavaScript, фокусирующийся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX. Разработка jQuery ведётся командой добровольцев на пожертвования.
HTML был одной из первых вещей, которую Джон Резиг освоил, когда он только начал заниматься программированием. Резиг программировал на QBasic, когда один его знакомый показал ему, как создать веб-страницу (используя Angelfire), а также основы HTML. Отец подарил ему на Рождество две книги по HTML. Именно тогда, когда он только начал программировать на Visual Basic, HTML и веб-дизайн очень заинтересовали его.

Wikipedia

Пример 1: Развернуть-свернуть элемент HTML

Решение 1. Для решения проблемы можно использовать Код №1. Данным скриптом можно развернуть-свернуть текст, блок или любой элемент из HTML, который можно как-то выбрать. Можно скрыть-показать блок полностью, если задать closeHeight = '0' . Если нужно чтобы кнопка «Развернуть» была всегда, то можно вынести содержимое из конструкции if(){}, а само условие удалить.



<!-- CSS -->
<style>
	/* Необходимые стили для работы скрипта */
	#tags-tiles { overflow: hidden; }

	.more-link {
	  display: block;
	  width: 100%;
	  padding: 8px;
	  text-align: center;
	  text-decoration: none;
	}
	.more-link:after {
		content: "\2193";
		margin-left: 8px;
		font-size: .8em;
	}
	.more-link.open:after { content: "\2191"; }
</style>

<!-- HTML -->
<div id="tags-tiles">
  <ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">PHP</a></li>
    <li><a href="#">Wordpress</a></li>
    <li><a href="#">Woocommerce</a></li>
    <li><a href="#">Programming</a></li>
    <li><a href="#">Web</a></li>
    <li><a href="#">...</a></li>
</div>
<div>
	<p><b>jQuery</b> — набор функций ....</p>
</div>

<!-- JS, jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <!-- Подключаем jQuery, сли нет -->

<script>
	// Скрипт свернуть развернуть элемент
	$(document).ready(function() {
		var closeHeight = '80px';		// Высота блока в свернутом виде
		var moreText 	= 'Развернуть'; 
		var lessText	= 'Свернуть';
		var duration	= '1500';		// Продолжительность анимации
		var easing = 'linear';
		var collapsElement = '#tags-tiles';	// Идентификатор или класс элемента, который будет сворачиваться
		
		var current = $(collapsElement);	// Получаем элемент, который будет сворачиваться
		
		// Если элемент больше нужной высоты, то добавляем Развернуть/Свернуть
		if (current.height() > parseInt(closeHeight)){
			current.data('fullHeight', current.height()).css('height', closeHeight);
			current.after('<a href="javascript:void(0);" class="more-link closed">' + moreText + '</a>');
	  
			var openSlider = function() {
				link = $(this);
				var openHeight = link.prev(collapsElement).data('fullHeight') + 'px';
				link.prev(collapsElement).animate({'height': openHeight}, {duration: duration }, easing);
				link.text(lessText).addClass('open').removeClass('closed');
				link.unbind('click', openSlider);
				link.bind('click', closeSlider);
			}

			var closeSlider = function() {
				link = $(this);
				link.prev(collapsElement).animate({'height': closeHeight}, {duration: duration }, easing);
				link.text(moreText).addClass('closed').removeClass('open');
				link.unbind('click');
				link.bind('click', openSlider);
			}
		  
			$('.more-link').bind('click', openSlider);
		}
	});

/* При использовании jQuery в Wordpress, если есть ошибки - лучше сам скрипт обернуть в */
jQuery.noConflict();
jQuery(document).ready(function($) {
   /* тут jQuery код: $(document).ready(function() {... */
});
/* или заменить "$" на "jQuery" */.
</script>

<style>

/* Необходимые стили для работы скрипта */

#tags-tiles { overflow: hidden; }

.more-link {

display: block;

width: 100%;

padding: 8px;

text-align: center;

text-decoration: none;

}

.more-link:after {

content: "\2193";

margin-left: 8px;

font-size: .8em;

}

.more-link.open:after { content: "\2191"; }

</style>

<ul>

<li><a href="#">JavaScript</a></li>

<li><a href="#">jQuery</a></li>

<li><a href="#">Wordpress</a></li>

<li><a href="#">Woocommerce</a></li>

<li><a href="#">Programming</a></li>

</div>

<div>

<p><b>jQuery</b> — набор функций ....</p>

</div>

// Скрипт свернуть развернуть элемент

$(document).ready(function() {

var closeHeight = '80px'; // Высота блока в свернутом виде

var moreText = 'Развернуть';

var lessText = 'Свернуть';

var duration = '1500'; // Продолжительность анимации

var easing = 'linear';

var collapsElement = '#tags-tiles'; // Идентификатор или класс элемента, который будет сворачиваться

var current = $(collapsElement); // Получаем элемент, который будет сворачиваться

// Если элемент больше нужной высоты, то добавляем Развернуть/Свернуть

if (current.height() > parseInt(closeHeight)){

current.data('fullHeight', current.height()).css('height', closeHeight);

current.after('<a href="javascript:void(0);" class="more-link closed">' + moreText + '</a>');

var openSlider = function() {

link = $(this);

var openHeight = link.prev(collapsElement).data('fullHeight') + 'px';

link.prev(collapsElement).animate({'height': openHeight}, {duration: duration }, easing);

link.text(lessText).addClass('open').removeClass('closed');

link.unbind('click', openSlider);

link.bind('click', closeSlider);

}

var closeSlider = function() {

link = $(this);

link.prev(collapsElement).animate({'height': closeHeight}, {duration: duration }, easing);

link.text(moreText).addClass('closed').removeClass('open');

link.unbind('click');

link.bind('click', openSlider);

}

$('.more-link').bind('click', openSlider);

}

});

/* При использовании jQuery в Wordpress, если есть ошибки - лучше сам скрипт обернуть в */

jQuery.noConflict();

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

/* тут jQuery код: $(document).ready(function() {... */

});

/* или заменить "$" на "jQuery" */.

</script>

Код 1: Скрипт jQuery — Развернуть-свернуть элемент, кнопка Подробнее, Ещё…

Похожая тема:

Решение 2. Подобная необходимость развернуть текст может быть на странице с выводом каких-то постов, карточек, где есть длинный текст и его нужно частично скрыть под кат, добавив кнопку вроде «Читать ещё». В этом случае лучше использовать Код №2. В принципе, первый скрипт оттуда и был взят.

See the Pen
blog post by Kocsten (@kocsten)
on CodePen.

Код №2: Свернуть-развернуть текст в массиве карточек, постов