Скрытый текст (спойлер) с помощью 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 и поделитесь ссылкой на запись в своих соц-сетях:
Jak dla mnie to bardzo dobra publikacja. Dziękuje za to Państwu! Zachęcam innych do przestudiowania treści. Mam pytanie. Czekam na Twój kontakt na mailaa.
при загрузке страници спойлер окткрыт как сделать чтоб он был закрыт???
В демо текст скрыт? Скрыт! Что вы делаете не так, я просто не могу гадать. Весь процесс построен на обработке свойства
display:none;. Способ проще некуда.А как сделать чтобы при нажатии на кнопку, открывалось сразу несколько скрытых блоков расположенных в разных местах страницы, а не один?
в событии onclick перечисляете id блоков, которые нужно открыть по клику:
onclick="view('t1'); view('t2'); return false"Спасибо, помогло! )))
здравстуйте,
у нас на сайте спойлер чат открывает, кнопка вверху на всю ширину страници и текст в ней «зайти в чат» надо как то отцентрировать текст в кнопке, в css -text-align: center- не срабатывает почему то, а если в хтмл центрить тегами, то остальные стили сss не подключаются или строчки чата центрятся тоже, в зависимости где ставить теги по центру в хтмл.
и еще как сделать чтобы при открытом спойлере, убиралсь кнопка «зайти в чат» или чтоб текст появлялся «закрыть чат»
Здравствуйте, Артём.
По вашему описанию, я могу лишь строить догадки, как у вас реализован спойлер, но всё же парочку вариантов набросал:
на js например, можно так
с подключением jQuery — так
а можно и вовсе без js. используя лишь магию css3 — тынц
От спасибо вам большое, второй вариант прям идеально.
И было бы еще идеально сделать так что бы кнопка при раскрытом спойлере, пропадала полностью,не занимая пространство своего размера над чатом. есть ли такая возможность?
Если без особых наворотов, как вариант можно так: Тынц
Спасибо за это реализацию спойлера на Javascript. У меня плагин NextGEN Gallery конфликтовал с реализацией спойлера на jQuery и не работал эффект Lightbox.
Добрый день!
Подскажите, как сделать чтоб при клике по второму спойлеру первый закрывался?
Практикуемся вместе с любимым сайтом. Итак, подкину код, но он уже с использованием jquery.
Меняем код скрипта на вот это:
function view(n) {var id_element = n;
var element = $("#" + id_element)
if($(element).hasClass('active')){
$(element).removeClass('active')
}
else {
$('.terms').removeClass('active')
$(element).addClass('active')
}
}
и добавляем стиль .active {display: block;}
NeedHate, рад вас снова видеть. Вы как всегда в тему))), спасибо.
Данный код отказывается так работать( Вообще не срабатывает
Заменила, стиль добавила, сохранила…а в результате текст просто украшенный и курсор спойлеры не открываются…
этот код делает так как я хочу, но мне не нравится это открыть-закрыть, хотелось бы все-таки текстом спойлеры открывать
думала проблема в том, что jquery не подключен, но это не решило проблему(
Данный пример можно заставить открывать блоки через ссылку ?
Спасибо.
Конечно можно, просто пропишите событие
onclickк ссылкеДрузья, я только изучаю JS, поэтому прошу помощи и прошу сильно не пинать. Есть HTML страничка, ее трогать НЕЛЬЗЯ:
Задание
.headline {border: 0px solid #000000; cursor: pointer; text-align: left;}
.hidden {display: none; border: 1px solid #ff0000; text-align: left; margin-top: 2px;}
Кликни меня
Привет
Текст…текст текст
Нужен скрипт, который бы делал следующее: при нажатии на надпись «Кликни меня» раскрывалось поле, в котором было отображено «Привет». Т.е на один div (тот, что с ID) жмешь, появлялся второй div (в нем слово ПРИВЕТ). Соответственно, обратное тоже верно.
Буду очень благодарна, кто объяснит как это сделать только с помощью JS. Спасибо заранее.
Все отлично, но если я хочу, чтоб спойлер был боку от кнопки справа или слева, а не внизу,как такое проделывать??? буду оч благодарна
Можно сделать поле: position: absolute; и двигать его top, bottom, left, right. Или тупо marginами подвинуть. Смотря что нужно.
Огромное спасибо за статью. Очень помогли.
HTML в спойлер вставить можно?
Красиво! Скриптик подключил через футер. На «чистых» страницах — без проблем — всё здорово!
На Mesh Tab’ах (одна из сущностей интегрированного в тему Visual Composer) — скрытый текст скрывается и… не открывается — намертво (при клике открытия не происходит).
Уже очень не первый раз, когда VC всю малину об… портит. Именно из-за таких вот «приколов» при малейшей возможности стараюсь использовать темы Вордпресс, НЕ СОДЕРЖАЩИЕ Visual Composer.
Если подскажете, как обойти приколы VC, буду благодарен. Переверстывать рабочий раздел сайта на «ручной» код, избавляясь от VC — не вариант, там много контента и VC-сущностей.