Как определить высоту скрытых блоков при помощи jQuery

Сложность данной задачи в том, что когда блок скрыт полностью, его высота всегда будет равна 0. Как это решить?

Как определить высоту скрытого контейнера и дописать свои события на jQuery?

Задача. У нас есть вкладки, лишь у активной вкладки есть высота. Если она будет превышать 250px, добавлять ей кнопку “читать далее” и открывать по клику весь контент.

Чтобы решить подобную задачу нам придется обходить стандартное состояния скрытия – display: none. При нём высота всегда неизвестна и равна 0. Для этого, при клике на табу мы сделаем “скрытое от пользователя состояние”, воспользуемся opacity: 0.

Наш HTML в этом случае будет таким:

<div
	class="catalog-element-sections-content-item"
	data-role="section.content.item"
	data-id="<?=$code?>"
	data-active="<?=($tab['ACTIVE'] == 'Y') ? 'true' : 'false'?>"
>
	<div class="tab-wrap section-hidden js-has-hidden">
		<?=$tab['CONTENT']?>
	</div>
	<div class="js-btn-show-text js-has-hidden-btn btn-seo-text">
		<?=GetMessage('BTN_SHOW_MORE')?>
	</div>
</div>

Для начала напишем простой код позволяющий открыть всё содержимое контейнера – это достигается за счёт удаления класса section-hidden.

$(document).on('click', '.js-btn-show-text', function(){
	let $this = $(this),
		$parent = $this.prev('.section-hidden');

	$parent.removeClass('section-hidden');
	$this.hide(0);

	return false;
});

А сам CSS этого класса такой, он позволяет задать нам полупрозрачный бг в самом низу, указывающий на то, что у контента есть продолжение:

.section-hidden {
	position: relative;
	max-height: 250px;
	overflow: hidden;
}

.section-hidden::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	height: 50px;
	background: -moz-linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,0)),color-stop(100%,#fff));
	background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%);
	background: -o-linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%);
	background: -ms-linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%);
	background: linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%);
}

Думаю писать код как кликнуть на табу нет смысла) Перейдём сразу к функции:

function checkHeight($child) {
	$child.addClass('opacity');
	let $heigth = $child.height();
	if ($heigth < 250) {
		$child.next('.js-btn-show-text').hide(0);
		$child.removeClass('section-hidden');
	} else {
		$child.next('.js-btn-show-text').show(0);
		$child.addClass('section-hidden');
	}
	$child.removeClass('opacity');
}

В переменную $child передается объект $this, он же селектор .section-hidden.
Перед запуском этой функции вы должны отобразить его, например, при помощи .show(0).
Добавляем ему класс opacity, с такими стилями – opacity: 0.
Измеряем высоту блока, и если она больше 250 – то показываем кнопку показать еще и добавляем класс section-hidden.
После всех процедур обязательно убираем класс opacity.

За счёт этого действия мы можем быстро проверить высоту блока, ограничить его по высоте и добавить кнопку. В отличие от способа проверки количества символов – то есть, показывать кнопку если количество символов превышает предел, мы можем определить превышение даже если там изображения.

На всякий случай определение символов на PHP выглядит так:
strlen($arItem[‘NAME’]);