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

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

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

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

[spoiler] [/spoiler]

Чтобы задать описание, по которому будет открываться показ скрытого текста, добавьте его после знака =. Пример: [spoiler=Открыть спойлер]Скрытая часть от посторонних глаз [/spoiler]

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

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

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 и другие площадки. Посмотреть, в действии код можно здесь: 

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

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

Для группы VK

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

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

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

Опубликовано Иванова Наталья

17 ответов к «Как спрятать текст под спойлер»

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

    Ответить

  2. Как-то столкнулся с желанием сделать спойлер на форуме. Там это с одной стороны сложнее, с другой - проще, так как делается всего 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>

    Ответить

  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>

    и т.д.

    Ответить

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

    Ответить

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

    Ответить

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

    Ответить

Добавить комментарий

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