Как спрятать текст под спойлер

текст под спойлер
Иногда нужно спрятать часть текста под спойлер. Данная функция необходима для того, чтобы на странице не виден был сразу весь текст, а его мог открыть пользователь при желании. Спойлер экономит место на странице и время вашего читателя. В этой статье вы узнаете о то, как делать спойлер на разных площадках.

Спойлер на форуме

Общий вид кода на форуме, поддерживающем BBcode, выглядит так:

Показать скрытое содержимое

Чтобы задать описание, по которому будет открываться показ скрытого текста, добавьте его после знака =. Пример:

Показать скрытое содержимое
Скрытая часть от посторонних глаз

Для быстрой вставки спойлеров на некоторых форумах предусмотрены специальные кнопки в редакторах сообщений. Пример:

Как добавить спойлер на форум

HTML-код спойлера на сайт

Спойлеры для сайта можно делать различными способами. Универсальный html-код спойлера, который можно добавить прямо в редактор сообщения сайта:

<div id="spoiler" style="display:none"> Скрытый контент (текст, код изображения, ссылки, видео и др.)</div> <button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Показать/Скрыть</button>

Вставлять код можно на любую html-страницу, в блог, на страницу сообщения wordpress, blogger и другие площадки. Посмотреть, в действии код можно здесь: 

Второй вариант спойлера для блога

Подойдет для любого типа блога, где можно редактировать код шаблона. Это может быть площадка blogger, так и wordpress или joomla и другие.

Инструкция:

  1. в шаблоне блога (для Blogger.com - это раздел "Тема", для WordPress можно вставить код в спойлера в виджет) находим тег </body> и добавляем перед ним код:

    <script language="javascript"> function toggle() { var ele = document.getElementById("toggleText"); var text = document.getElementById("displayText"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "Открыть спойлер"; } else { ele.style.display = "block"; text.innerHTML = "Закрыть"; } } </script>
  2. Теперь при добавлении статьи, вам нужно в режиме HTML писать код скрытого текста:

    <a href="javascript:toggle();" id="displayText">Открыть спойлер</a> <div id="toggleText" style="display: none;">Здесь скрытый текст</div>

Скрытый текст посредством HTML5

В HTML5 существуют специальные теги, с помощью которых можно создавать спойлеры, не прибегая к javasript. Чтобы скрыть текст, код или изображения на сайте необходимо вставить код в нужное место:

<details>
<p>Скрытый контент</p>
<summary>Спойлер</summary>
</details>

Посмотрите как работает этот код:

Скрытый контент

Спойлер

Спойлер для ЖЖ

В живом журнале поддерживается такие коды для спойлера:

<lj-spoiler title="Текст ссылки на спойлер"> Этот текст будет скрыт </lj-spoiler>

Для группы VK

Для того, чтобы скрыть часть текста на странице группы вконтакте, понадобится следующий код:

{{Hider|Заголовок спойлера
Скрытое содержимое спойлера
}}

Смотрите видео о том, как применять данный код:

Оцените статью
Добавить комментарий

  1. Княгиня

    Я себе для того же самого сделала шорткодик (поскольку у меня блог standalone). Сокращает число движений... если, конечно, помнишь, как им пользоваться. 🙂 На бесплатных сервисах такое невозможно в принципе, а у себя можно накрутить в своё удовольствие.

    Ответить
  2. fingeniy

    Как-то столкнулся с желанием сделать спойлер на форуме. Там это с одной стороны сложнее, с другой - проще, так как делается всего 1 раз. Необходимо в администраторской панели добавлять отдельный BBCode, а найти его в чистом виде не так просто: у многих разработчиков в коды вставлены свои ссылки, которые они готовы убрать за определенную плату).

    Ответить
  3. Анонимный

    Не работает у меня на Джумла 3, текст прячется, кнопка есть, но не нажимается, подскажите чего делать : )

    Ответить
  4. Иванова Наталья

    Видимо существует конфликт. Попробуйте этот код:
    <div id="mus_hidden" style="display: none;">Здесь скрытый текст</div>
    <a href="javascript:return false;" onclick="jQuery('#mus_hidden').hide(600);">Закрыть</a><br><a href="javascript:return false;" onclick="jQuery('#mus_hidden').show(300);">Открыть</a>

    Ответить
  5. Иванова Наталья

    Код, опубликованный выше будет работать только при подключенной библиотеке jquery

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

    Столкнулся с проблемой: при размещении двух или более спойлеров на одной странице открывает только содержимое первого спойлера. даже если нажимаешь на ссылку 3 спойлера, все равно открывает содержимое первого спойлера.

    Ответить
  7. Иванова Наталья

    Алексей, чтобы работали несколько спойлеров на одной странице, нужно, чтобы у каждого были собственные идентификаторы. Например, для первого спойлера вставляете код из статьи, второй спойлер будет иметь код:

    <div id="spoiler1" style="display:none">
    Скрытый контент (текст, код изображения, ссылки, видео и др.)</div>
    <button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}">Показать/Скрыть</button>

    третий спойлер:

    <div id="spoiler2" style="display:none">
    Скрытый контент (текст, код изображения, ссылки, видео и др.)</div>
    <button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}">Показать/Скрыть</button>

    и т.д.

    Ответить
  8. Анонимный

    Было бы лучше, если бы были разные тексты "Показать", а потом "Скрыть".

    Ответить
  9. Анонимный

    Возникла проблема с приведённым в тексте вариантом спойлера: сначала работало нормально, но сейчас по умолчанию показывает содержимое. Т.е. при заходе на страницу спойлер раскрытый, нажимаю на кнопку - сворачивается. Как решить?

    Ответить
  10. Иванова Наталья

    Анонимный, попробуйте переустановить код. Если в нем появились такие теги, как br, то их убрать.

    Ответить
  11. Zinftar

    Большое спасибо. Отличное решение для нескольких спойлеров на странице. Всё работает на ура. Образец - http://serfbitcoin.ru/istorii-obmanutyx-lyudej/

    Ответить
  12. Nedoshivkin {Olimp}

    [spoiler]afag[/SPOILER]

    Ответить
  13. Иванова Наталья

    Nedoshivkin, спойлер в комментариях не работает

    Ответить
  14. SK

    Спасибо! Успешно работают несколько спойлеров на странице (Джумла 3.8)

    Ответить
  15. Иванова Наталья

    SK, рада, что пригодилось!

    Ответить
  16. Unknown

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

    Ответить
  17. Mary

    Доброго дня, подскажите возможно ли цвет кнопки спойлера изменить?

    Ответить