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

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

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

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

Здесь скрытое изображение

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

Подойдет для любого типа блога, где можно редактировать код шаблона. Это может быть площадка 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|Заголовок спойлера
Скрытое содержимое спойлера
}}

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