Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

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

Всего комментариев: 27

  • Adrian Kołodziej opinie: 3 февраля, 2015 в 04:17

    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.

    Ответить
  • Стас: 10 мая, 2015 в 18:54

    при загрузке страници спойлер окткрыт как сделать чтоб он был закрыт???

    Ответить
    • driver: 10 мая, 2015 в 22:45

      В демо текст скрыт? Скрыт! Что вы делаете не так, я просто не могу гадать. Весь процесс построен на обработке свойства display:none;. Способ проще некуда.

      Ответить
  • Алексей: 29 мая, 2015 в 17:25

    А как сделать чтобы при нажатии на кнопку, открывалось сразу несколько скрытых блоков расположенных в разных местах страницы, а не один?

    Ответить
    • driver: 29 мая, 2015 в 17:56

      в событии onclick перечисляете id блоков, которые нужно открыть по клику:
      onclick="view('t1'); view('t2'); return false"

      Ответить
      • Алексей: 30 мая, 2015 в 05:06

        Спасибо, помогло! )))

        Ответить
  • Артем: 9 октября, 2015 в 05:22

    здравстуйте,
    у нас на сайте спойлер чат открывает, кнопка вверху на всю ширину страници и текст в ней «зайти в чат» надо как то отцентрировать текст в кнопке, в css -text-align: center- не срабатывает почему то, а если в хтмл центрить тегами, то остальные стили сss не подключаются или строчки чата центрятся тоже, в зависимости где ставить теги по центру в хтмл.
    и еще как сделать чтобы при открытом спойлере, убиралсь кнопка «зайти в чат» или чтоб текст появлялся «закрыть чат»

    Ответить
  • driver: 9 октября, 2015 в 15:12

    Здравствуйте, Артём.
    По вашему описанию, я могу лишь строить догадки, как у вас реализован спойлер, но всё же парочку вариантов набросал:
    на js например, можно так
    с подключением jQuery — так
    а можно и вовсе без js. используя лишь магию css3 — тынц

    Ответить
    • Артем: 11 октября, 2015 в 12:45

      От спасибо вам большое, второй вариант прям идеально.

      Ответить
    • Артем: 11 октября, 2015 в 13:10

      И было бы еще идеально сделать так что бы кнопка при раскрытом спойлере, пропадала полностью,не занимая пространство своего размера над чатом. есть ли такая возможность?

      Ответить
      • driver: 11 октября, 2015 в 17:31

        Если без особых наворотов, как вариант можно так: Тынц

        Ответить
  • Ринат: 1 ноября, 2015 в 11:08

    Спасибо за это реализацию спойлера на Javascript. У меня плагин NextGEN Gallery конфликтовал с реализацией спойлера на jQuery и не работал эффект Lightbox.

    Ответить
  • Юрий: 15 декабря, 2015 в 06:52

    Добрый день!
    Подскажите, как сделать чтоб при клике по второму спойлеру первый закрывался?

    Ответить
    • NeedHate: 16 декабря, 2015 в 00:30

      Практикуемся вместе с любимым сайтом. Итак, подкину код, но он уже с использованием 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;}

      Ответить
      • driver: 16 декабря, 2015 в 20:22

        NeedHate, рад вас снова видеть. Вы как всегда в тему))), спасибо.

        Ответить
      • Оксана: 3 сентября, 2016 в 14:58

        Данный код отказывается так работать( Вообще не срабатывает
        Заменила, стиль добавила, сохранила…а в результате текст просто украшенный и курсор спойлеры не открываются…
        этот код делает так как я хочу, но мне не нравится это открыть-закрыть, хотелось бы все-таки текстом спойлеры открывать
        думала проблема в том, что jquery не подключен, но это не решило проблему(

        Ответить
  • Сергей: 25 марта, 2016 в 01:26

    Данный пример можно заставить открывать блоки через ссылку ?
    Спасибо.

    Ответить
    • driver: 25 марта, 2016 в 02:23

      Конечно можно, просто пропишите событие onclick к ссылке

      Ответить
  • Марина: 29 августа, 2016 в 12:47

    Друзья, я только изучаю 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. Спасибо заранее.

    Ответить
  • Любочка: 12 октября, 2016 в 13:24

    Все отлично, но если я хочу, чтоб спойлер был боку от кнопки справа или слева, а не внизу,как такое проделывать??? буду оч благодарна

    Ответить
    • Мария: 24 ноября, 2016 в 11:01

      Можно сделать поле: position: absolute; и двигать его top, bottom, left, right. Или тупо marginами подвинуть. Смотря что нужно.

      Ответить
  • Мария: 24 ноября, 2016 в 10:58

    Огромное спасибо за статью. Очень помогли.

    Ответить
  • Денис: 10 декабря, 2016 в 14:58

    HTML в спойлер вставить можно?

    Ответить
  • Михаил: 13 февраля, 2019 в 16:53

    Красиво! Скриптик подключил через футер. На «чистых» страницах — без проблем — всё здорово!
    На Mesh Tab’ах (одна из сущностей интегрированного в тему Visual Composer) — скрытый текст скрывается и… не открывается — намертво (при клике открытия не происходит).
    Уже очень не первый раз, когда VC всю малину об… портит. Именно из-за таких вот «приколов» при малейшей возможности стараюсь использовать темы Вордпресс, НЕ СОДЕРЖАЩИЕ Visual Composer.
    Если подскажете, как обойти приколы VC, буду благодарен. Переверстывать рабочий раздел сайта на «ручной» код, избавляясь от VC — не вариант, там много контента и VC-сущностей.

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>