Иногда нужно спрятать часть текста под спойлер. Данная функция необходима для того, чтобы на странице не виден был сразу весь текст, а его мог открыть пользователь при желании. Спойлер экономит место на странице и время вашего читателя. В этой статье вы узнаете о то, как делать спойлер на разных площадках.
Спойлер на форуме
Общий вид кода на форуме, поддерживающем 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 и другие.
Инструкция:
- в шаблоне блога (для 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> - Теперь при добавлении статьи, вам нужно в режиме 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|Заголовок спойлера
Скрытое содержимое спойлера
}} Смотрите видео о том, как применять данный код:
Я себе для того же самого сделала шорткодик (поскольку у меня блог standalone). Сокращает число движений... если, конечно, помнишь, как им пользоваться. 🙂 На бесплатных сервисах такое невозможно в принципе, а у себя можно накрутить в своё удовольствие.
Как-то столкнулся с желанием сделать спойлер на форуме. Там это с одной стороны сложнее, с другой - проще, так как делается всего 1 раз. Необходимо в администраторской панели добавлять отдельный BBCode, а найти его в чистом виде не так просто: у многих разработчиков в коды вставлены свои ссылки, которые они готовы убрать за определенную плату).
Не работает у меня на Джумла 3, текст прячется, кнопка есть, но не нажимается, подскажите чего делать : )
Видимо существует конфликт. Попробуйте этот код:
<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>
Код, опубликованный выше будет работать только при подключенной библиотеке jquery
Столкнулся с проблемой: при размещении двух или более спойлеров на одной странице открывает только содержимое первого спойлера. даже если нажимаешь на ссылку 3 спойлера, все равно открывает содержимое первого спойлера.
Алексей, чтобы работали несколько спойлеров на одной странице, нужно, чтобы у каждого были собственные идентификаторы. Например, для первого спойлера вставляете код из статьи, второй спойлер будет иметь код:
<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>
и т.д.
Было бы лучше, если бы были разные тексты "Показать", а потом "Скрыть".
Возникла проблема с приведённым в тексте вариантом спойлера: сначала работало нормально, но сейчас по умолчанию показывает содержимое. Т.е. при заходе на страницу спойлер раскрытый, нажимаю на кнопку - сворачивается. Как решить?
Анонимный, попробуйте переустановить код. Если в нем появились такие теги, как br, то их убрать.
Большое спасибо. Отличное решение для нескольких спойлеров на странице. Всё работает на ура. Образец - http://serfbitcoin.ru/istorii-obmanutyx-lyudej/
[spoiler]afag[/SPOILER]
Nedoshivkin, спойлер в комментариях не работает
Спасибо! Успешно работают несколько спойлеров на странице (Джумла 3.8)
SK, рада, что пригодилось!
Подскажите, пожалуйста, как сделать, чтобы текст открывался не вверх страницы, над кнопкой, а вниз?
Доброго дня, подскажите возможно ли цвет кнопки спойлера изменить?