2017-08-16

Textual description of firstImageUrl

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

текст под спойлер
Иногда нужно спрятать часть текста под спойлер. Это нужно в том случае, если вам не нужно демонстрировать все элементы сразу на странице записи, для того, чтобы сделать сообщение более аккуратным и компактным.
Например, если у вас получился большой пост с многочисленными изображениями, то картинки можно спрятать под спойлером. Часто скрывают коды, ссылки на скачивание, таблицы, дополнительную информацию, технические характеристики товара в интернет-магазине и многое другое.
Не нужно путать спойлер с понятием “убрать под кат”, во  втором случае часть контента будет показано на главной странице, а все сообщение – открываться на отдельной странице записи.
Как же спрятать текст под спойлер?
Я прелагаю воспользоваться для этого универсальным кодом, который будет работать на любой площадке, где поддерживаются 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>

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

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

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

Я себе для того же самого сделала шорткодик (поскольку у меня блог 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>


и т.д.

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

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

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

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

Иванова Наталья комментирует...

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

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

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

Nedoshivkin {Olimp} комментирует...

[spoiler]afag[/SPOILER]

Иванова Наталья комментирует...

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

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

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

Иванова Наталья комментирует...

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

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

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