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