Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Javascript » Скрытый текст (спойлер) с помощью Javascript

Скрытый текст (спойлер) с помощью Javascript

Скрытый текст (спойлер) с помощью 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 и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

26 комментариев
  1. Красиво! Скриптик подключил через футер. На «чистых» страницах — без проблем — всё здорово!

    На Mesh Tab'ах (одна из сущностей интегрированного в тему Visual Composer) — скрытый текст скрывается и... не открывается — намертво (при клике открытия не происходит).

    Уже очень не первый раз, когда VC всю малину об... портит. Именно из-за таких вот «приколов» при малейшей возможности стараюсь использовать темы Вордпресс, НЕ СОДЕРЖАЩИЕ Visual Composer.

    Если подскажете, как обойти приколы VC, буду благодарен. Переверстывать рабочий раздел сайта на «ручной» код, избавляясь от VC — не вариант, там много контента и VC-сущностей.

    Ответить
«12
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Subscribe without commenting

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru