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

Содержание

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

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

Wikipedia

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

Развернуть-Свернуть контент на jQuery

Решение 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 — Развернуть-свернуть элемент, кнопка Подробнее, Ещё…

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

Развернуть-Свернуть контент на jQuery для множества элементов

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

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

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

Показать-Скрыть контент на Javascript для списка

Решение 3. Код №3 рассчитан на множество элементов списка. Там мы получаем все нужные списки и в каждом оставляем видимыми только нужное количество пунктов.


<!-- CSS -->
<style>
.pr_catalog_list li {
  display: none;
}

.pr_catalog_list li.visible {
  display: list-item;
}

.show-more {
  cursor: pointer;
  color: var(--wd-link-color);
}
</style>

<!-- HTML -->
<div class="pr_catalog_list">
	<p>List 1</p>
	<ul>
		<li>item 1</li>
		<li>item 2</li>
		<li>item 3</li>
		<li>item 4</li>
		<li>item 5</li>
		<li>item 6</li>
		<li>item 7</li>
		<li>item 8</li>
		<li>item 9</li>
	</ul>
</div>

<div class="pr_catalog_list">
	<p>List 2</p>
	<ul>
		<li>item 1</li>
		<li>item 2</li>
		<li>item 3</li>
		<li>item 4</li>
		<li>item 5</li>
		<li>item 6</li>
		<li>item 7</li>
		<li>item 8</li>
		<li>item 9</li>
	</ul>
</div>

<div class="pr_catalog_list">
	<p>List 3</p>
	<ul>
		<li>item 1</li>
		<li>item 2</li>
		<li>item 3</li>
		<li>item 4</li>
		<li>item 5</li>
		<li>item 6</li>
		<li>item 7</li>
		<li>item 8</li>
		<li>item 9</li>
	</ul>
</div>

<!-- JS -->
<script>
document.addEventListener('DOMContentLoaded', function() {
	const maxItems = 4;
	const textDisplayMore = 'Показать ещё...';
	const textRollUp = 'Свернуть';
	const catLists = document.querySelectorAll('.pr_catalog_list ul');

  catLists.forEach(function(list) {
    const items = list.querySelectorAll('li');
    const showMore = document.createElement('span');
    showMore.textContent = textDisplayMore;
    showMore.classList.add('show-more');

    if (items.length > maxItems) {
      for (let i = 0; i < maxItems; i++) {
        items[i].classList.add('visible');
      }
      list.appendChild(showMore);
    }

    showMore.addEventListener('click', function() {
      if (showMore.textContent === textDisplayMore) {
        items.forEach(function(item) {
          item.classList.add('visible');
        });
        showMore.textContent = textRollUp;
      } else {
        for (let i = maxItems; i < items.length; i++) {
          items[i].classList.remove('visible');
        }
        showMore.textContent = textDisplayMore;
      }
    });
  });
});
</script>

100

101

<style>

.pr_catalog_list li {

display: none;

}

.pr_catalog_list li.visible {

display: list-item;

}

.show-more {

cursor: pointer;

color: var(--wd-link-color);

}

</style>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

document.addEventListener('DOMContentLoaded', function() {

const maxItems = 4;

const textDisplayMore = 'Показать ещё...';

const textRollUp = 'Свернуть';

const catLists = document.querySelectorAll('.pr_catalog_list ul');

catLists.forEach(function(list) {

const items = list.querySelectorAll('li');

const showMore = document.createElement('span');

showMore.textContent = textDisplayMore;

showMore.classList.add('show-more');

if (items.length > maxItems) {

for (let i = 0; i < maxItems; i++) {

items[i].classList.add('visible');

}

list.appendChild(showMore);

}

showMore.addEventListener('click', function() {

if (showMore.textContent === textDisplayMore) {

items.forEach(function(item) {

item.classList.add('visible');

});

showMore.textContent = textRollUp;

} else {

for (let i = maxItems; i < items.length; i++) {

items[i].classList.remove('visible');

}

showMore.textContent = textDisplayMore;

}

});

</script>

Код №3: Пункты убрать под кат в массиве списков на JavaScript

See the Pen
Свернуть — развернуть список ‘ul’ на JavaScript by qfurs (@qfurs)
on CodePen.