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

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

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

Показать/Скрыть

16 ответов к «Прячем текст под спойлер»

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

  2. Как-то столкнулся с желанием сделать спойлер на форуме. Там это с одной стороны сложнее, с другой — проще, так как делается всего 1 раз. Необходимо в администраторской панели добавлять отдельный BBCode, а найти его в чистом виде не так просто: у многих разработчиков в коды вставлены свои ссылки, которые они готовы убрать за определенную плату).

  3. Не работает у меня на Джумла 3, текст прячется, кнопка есть, но не нажимается, подскажите чего делать : )

  4. Видимо существует конфликт. Попробуйте этот код:
    <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>

  5. Столкнулся с проблемой: при размещении двух или более спойлеров на одной странице открывает только содержимое первого спойлера. даже если нажимаешь на ссылку 3 спойлера, все равно открывает содержимое первого спойлера.

  6. Алексей, чтобы работали несколько спойлеров на одной странице, нужно, чтобы у каждого были собственные идентификаторы. Например, для первого спойлера вставляете код из статьи, второй спойлер будет иметь код:

    <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>

    и т.д.

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

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

  9. Подскажите, пожалуйста, как сделать, чтобы текст открывался не вверх страницы, над кнопкой, а вниз?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *