Показать-скрыть элемент, развернуть-свернуть под кат на 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