256 подписчиков
Показать-скрыть элемент, развернуть-свернуть под кат на jQuery
#Программирование #JavaScript #вебмастеринг #jQuery #WpCraft #JS #HTML
❓Задача. Есть блок с плиткой тегов, который имеет на разных страницах разное количество элементов. Когда этих элементов много и они не помещаются в одну строку. Нужно под блоком добавить кнопу «Развернуть-Свернуть»
✅ Решение: Подробнее в статье.
<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);
}
});
</script>
💾 Подробнее см. статью https://wpcraft.top/?p=3669