
С помощью нескольких строк javascript, вы сможете легко организовать скрытые блоки с содержанием, раскрывающиеся по клику.
Согласитесь, иногда лучше сделать маленький блок скрытого текста с аккуратной кликабельной надписью, скрыть под ней, например: правила комментирования, html-код кнопки или баннера и т.д. Тот, кому это очень нужно — нажмёт на выделенную надпись и всё увидит. Нет необходимости постоянно держать на виду у всех определённые данные.
Наверное самый известный пример использования скрытого текста, это хорошо всем известные «спойлеры» на различных форумах.
Скрытый текст, можно организовать и с помощью jQuery, и на чистом CSS, у каждой техники есть, как преимущества, так и недостатки.
Сегодня же, я хочу продемонстрировать совсем крохотный javascript, с помощью которого, очень просто «спрятать под кат», практически любую информацию у себя на сайте.
И так, у нас есть какой-то текст, нам необходимо выделить либо отдельное слово, термин или целую фразу и сделать их кликабельными. Для этого достаточно «обнести» нужное нам слово(фразу) тегом <span>
, как в примере, или же ссылкой, используя тег <a>
. Многие чаще используют тег <a>
, тут и курсор прописан, и выделение по умолчанию, но я так думаю, зачем нам ссылки, которые никуда не ведут, а «нарисовать» курсор, и выделить любой элемент, легко можно с помощью css. Так что, внутри текста смело пользуем <span>
:
<span class="tt" onclick="view('t1'); return false">текст текст текст</span> |
Тут всё очень просто, class="tt"
используем для оформления фразы(слова) в css, где навешиваем курсор, выделяем, подчеркиваем если нужно и т.д., с помощью onclick="view('t1'); return false"
привязываемся через идентификатор t1
к исполняемому js, и к скрытому до поры до времени блоку с содержанием.
В зависимости от того, сколько вы будете использовать скрытых блоков на одной странице, вам необходимо менять порядковый номер id, т.е. t1, t3, t3 и так далее...
Для скрытого текста, можете использовать div-контейнер, или же, как в примере, всё тот же тег <span>
, главное связать его классом с css и не забыть правильно указать идентификатор:
<span id="t1" class="terms"> Здесь размещаете любой текст, а можете разбавить и картинкой.... </span> |
Как я упоминал выше, чтобы завести наш «спойлер», открывать и скрывать по клику, понадобится крохотный javascript, размещённый непосредственно в теле страницы, лучше перед тегом </body>
:
<script type="text/javascript"> function view(n) { style = document.getElementById(n).style; style.display = (style.display == 'block') ? 'none' : 'block'; } </script> |
Вот и всё, вам остаётся только определиться, что же такого-этакого скрыть с глаз пользователей. Поковыряться в коде, можете непосредственно в онлайн-редакторе, да в принципе, там и ковырять то нечего))).
Всех с наступающим новым годом! Здоровья, остальное всё добудем сами!
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Красиво! Скриптик подключил через футер. На «чистых» страницах — без проблем — всё здорово!
На Mesh Tab'ах (одна из сущностей интегрированного в тему Visual Composer) — скрытый текст скрывается и... не открывается — намертво (при клике открытия не происходит).
Уже очень не первый раз, когда VC всю малину об... портит. Именно из-за таких вот «приколов» при малейшей возможности стараюсь использовать темы Вордпресс, НЕ СОДЕРЖАЩИЕ Visual Composer.
Если подскажете, как обойти приколы VC, буду благодарен. Переверстывать рабочий раздел сайта на «ручной» код, избавляясь от VC — не вариант, там много контента и VC-сущностей.