категория: , Полезности
✎ Опубликовано: 02.11.2015 ☕ Просмотров: 7491 ✉ Комментарии: 0
Как то в одном моем проекте мне надо было реализовать скрытие и отображение части текста — кликая по ссылке. Учитывая то, что заказчик сам выбирает что скрывать, мне нужен был скрипт jquery, который не будет зависеть от места его применения.
Как то в одном моем проекте мне надо было реализовать скрытие и отображение части текста — кликая по ссылке. Учитывая то, что заказчик сам выбирает что скрывать, мне нужен был скрипт jquery, который не будет зависеть от места его применения.
Для начала надо продумать все так, что бы неподготовленный человек смог использовать данный функционал. Конечно же, все должно быть просто и редактироваться в визуальном редакторе или при минимальном копании в html коде описания или статьи.
Поэтому реализовал я это следующим образом. Когда заказчику надо было скрыть часть текста, он перед скрываемым блоком писал Слово-ссылку (например “Подробнее”), и присваивал этому слову заголовок h6, после которого все что надо было скрыть — помещали в контейнер div с классом hide. Получалась вот такая конструкция html кода:
<h6>Подробнее</h6> <div class='hide'> <p>Скрытый текст</p> <p>Скрытый текст</p> </div>
Для скрытия текста, нам надо в css файл стилей вписать .hide{display:none;} после чего блок будет недоступен для просмотра.
Для открытия блока по клику на текст Подробнее, где в тех же css стилях его можно украсить под ссылку, нам надо добавить javascript код на jquery. Для этого нам надо добавить на страницу скрипт:
$(function(){ $('h6').toggle(function(){ $(this).next("div.hide").slideDown(); $('h6').html("Закрыть"); }, function(){ $(this).next("div.hide").slideUp(); $('h6').html("Подробнее"); }); });
После этих дополнений мы можем скрывать и открывать блоки с контентом по клику на ссылку или текст.
Обратите внимание еще на такой момент. Скрывая текст от пользователя, таким образом, Вы рискуете, что поисковые системы посчитают это за черный метод SEO, за что могут быть применены санкции до сайта. Но если это делать в меру, например скрывать табличные данные, и писать текст ссылки как посмотреть характеристики , то оно будет удобно, и вероятность что сайт залетит под фильтры поисковых систем сводятся к нулю.
Читая информацию о рекламе в facebook я нашел кое что интересное
Чистый и валидный HTML и CSS код, Хорошие показатели Google Page Speed, Более 20 модулей в комплекте, Профессиональная техническая поддержка - это только часть того что есть в шаблоне
Исправляем странный баг в Opencart в удаляется товар при копировании. Этот баг присутствует в google chrome
Также в статье хочу выразить благодарность не только Виталию а и другим крутым авторам дополнений с кем приходилось иметь дело
Чтобы принимать Биткоин и Лайткоин в OpenCart, вам не нужно заполнять утомительные документы, проходить проверку и ждать несколько дней. Установите бесплатный модуль и просто введите адрес своего Биткоин и/или Лайткоин кошелька. Тогда все входящие платежи
Монобанк - прогрессивный банк без отделений в котором дают кредитные карточки с хорошим грейс периодом а также возможностью заработать открыв в нем депозит. Именно о нем и пойдет речь
Мы знаем что поисковые роботы любят текст на страницах. Однако публикуя тексты помните предназначена ли эта страница для такого текста
Небольшой пример как можно сделать автоматически содержание описания со скролом при клике на заголовок
Обзор платежного шлюза fondy который позволяет сделать онлайн оплату на сайте за любые товары или услуги
Как оптимизировать сайт для google page speed - обзор основного функционала сервиса от гугл для проверки скорости загрузки страницы
Для того что бы вывести кастомную информацию не надо много кода. Достаточно применить правильный подход и пару строк кода. Читаем в статье.
Как мне "посчастливилось" пощупать UMI CMS особенно со стороны переноса данных и почему меня до сих пор тошнит при слове UMI
В этом обзоре будут выявлены все плюсы и минусы каждого фильтра. Всего в обзоре будет 7 фильтров который продаются и развиваются. По завершению будет дана рекомендация какой же выбрать
Коллеги, давайте предоставлять хороший сервис и поднимать планку качества. Небольшая история как я обращался к разным разработчикам