2014-08-16

Прячем текст под спойлер

текст под спойлер
Иногда нужно спрятать часть текста под спойлер. Это нужно в том случае, если вам не нужно демонстрировать все элементы сразу на странице записи, для того, чтобы сделать сообщение более аккуратным и компактным.
Например, если у вас получился большой пост с многочисленными изображениями, то картинки можно спрятать под спойлером. Часто скрывают коды, ссылки на скачивание, таблицы, дополнительную информацию, технические характеристики товара в интернет-магазине и многое другое.
Не нужно путать спойлер с понятием “убрать под кат”, во  втором случае часть контента будет показано на главной странице, а все сообщение – открываться на отдельной странице записи.
Как же спрятать текст под спойлер?
Я прелагаю воспользоваться для этого универсальным кодом, который будет работать на любой площадке, где поддерживаются html-коды и javascript, а точнее – на blogger (blogspot), wordpress, joomla, ucoz.

На бесплатных блогосервисах – livejournal, liveinternet и других код не работает. Для жж работает свой тег скрытого контента:
>/*      | <lj-spoiler title="Текст ссылки на спойлер"> Этот текст будет скрыт </lj-spoiler>


Как сделать спойлер – вставьте в сообщение в режиме 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>

Пример спойлера:

8 комментариев :

Княгиня комментирует...

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

fingeniy комментирует...

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


и т.д.

Анонимный комментирует...

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

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML