Задача. На сайте есть блок с плиткой тегов, который имеет на разных страницах различное количество элементов. Когда этих элементов много и они не помещаются в одну строку, нужно под блоком добавить кнопу «развернуть-свернуть» — Пример 1.
Решение 1. Для решения проблемы можно использовать Код №1. Данным скриптом можно развернуть-свернуть текст, блок или любой элемент из HTML, который можно как-то выбрать. Можно скрыть-показать блок полностью, если задать closeHeight = '0'
. Если нужно чтобы кнопка «Развернуть» была всегда, то можно вынести содержимое из конструкции if(){}
, а само условие удалить.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<!-- 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> |
Решение 2. Подобная необходимость развернуть текст может быть на странице с выводом каких-то постов, карточек, где есть длинный текст и его нужно частично скрыть под кат, добавив кнопку вроде «Читать ещё». В этом случае лучше использовать Код №2. В принципе, первый скрипт оттуда и был взят.
See the Pen
blog post by Kocsten (@kocsten)
on CodePen.