Главная » 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 и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

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

24 комментария
  1. 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.

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

    Ответить
    • driver:

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

      Ответить
  3. Алексей:

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

    Ответить
    • driver:

      в событии onclick перечисляете id блоков, которые нужно открыть по клику:

      onclick="view('t1'); view('t2'); return false"

      Ответить
  4. Артем:

    здравстуйте,

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

    и еще как сделать чтобы при открытом спойлере, убиралсь кнопка «зайти в чат» или чтоб текст появлялся «закрыть чат»

    Ответить
  5. driver:

    Здравствуйте, Артём.

    По вашему описанию, я могу лишь строить догадки, как у вас реализован спойлер, но всё же парочку вариантов набросал:

    на js например, можно так

    с подключением jQuery — так

    а можно и вовсе без js. используя лишь магию css3 — тынц

    Ответить
    • Артем:

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

      Ответить
    • Артем:

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

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

    Ответить
  7. Юрий:

    Добрый день!

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

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

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

        Ответить
        • Есть просто неинтересные вопросы, на них и отвечать не хочется. А есть интересные, которые развивают знания. )))

      • Оксана:

        Данный код отказывается так работать( Вообще не срабатывает

        Заменила, стиль добавила, сохранила...а в результате текст просто украшенный и курсор спойлеры не открываются...

        этот код делает так как я хочу, но мне не нравится это открыть-закрыть, хотелось бы все-таки текстом спойлеры открывать

        думала проблема в том, что jquery не подключен, но это не решило проблему(

        Ответить
        • Оксана:

          а еще плюс в вашем примере спойлера в том, что в скрытом тексте можно использовать ссылки, в том при попытке нажать на ссылку — спойлер сворачивается(

  8. Сергей:

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

    Спасибо.

    Ответить
    • driver:

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

      Ответить
  9. Марина:

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

    Ответить
  10. Любочка:

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

    Ответить
    • Мария:

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

      Ответить
  11. Мария:

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

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

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

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

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

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru