Спрятать длинный текст спойлером



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


Мы научились делать вертикальную и горизонтальную прокрутку текста, заголовков сообщений, прокрутку всего содержания блога. Сегодня научимся, как скрыть длинный текст спойлером, или как ещё говорят: скрыть под кат.

Согласитесь, не совсем красиво смотрится, когда сообщение растягивается длинной простыней. Правда, разработчики Google предоставили нам возможность воспользоваться ссылкой <дальше> в редакторе сообщений, но не все шаблоны её поддерживают. У меня в этом блоге ссылка <дальше> не работает. Вносила изменения в шаблон, но все безрезультатно.

Поэтому, у кого такая же ситуация, копируем код ниже и прячем текст под кат с помощью этого кода. Тем более, что сделать это совсем не сложно. Пишите в редакторе сообщение, получается слишком длинное. Скопированный ниже код вставляете, нажав HTML, затем-создать. У вас появится спойлер. Дальше копируем ту часть текста, которую хотим скрыть, нажимаем опять HTML и вставляем текст в код, где написано <текст скрыт спойлером>.



<div style="margin: 0px 0px 0px 0px;">
<div class="smallfont" style="margin-bottom: 0px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="background-color: #cfe2f3; border-color: #3d85c6; border-radius: 5px; border: solid 1px; color: #0b5394; cursor: pointer; font-size: 15px; font: bold 16px Georgia; margin: 0px; padding: 10px; width: 205px;" value="Посмотреть  текст:" /> </div>
<div class="alt2" style="margin: 0px; padding: 0px;">
<div style="display: none;">
<br />
<br />Текст скрыт спойлером</div>

Получаем вот такой результат.
Нажмите и читайте весь текст.



Нажмите <посмотреть текст>. увидите как текст раскрывается, при повторном нажатии текст спрячется. Можно спрятать любой текст, решать Вам. Вы можете внести изменения: изменить ширину спойлера width 205 px, цвет текста и фон кнопки .На сегодня все. Надеюсь информация была полезной. До свидания.



Текст скрыт спойлером


Автор статьи ✎ Olga Protasova Выпуск ✹ 9/24/2013 Ярлыки ►


Открыть комментарии →

0 коммент. :

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


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *