15 января 2014 г.

Как добавить спойлер в текст?

Новая фишка, опробованная мной - спойлер.
Пример на странице с анонсами тем для КД - с помощью спойлера скрыла текст с Правилами КД.

Некоторые вещи (ага, правила особенно))) хочется убрать как бы под кат, чтоб глаза не мозолили ;-) Но на страницах кат не работает. Нашла выход с помощью спойлера.

Если нажать на кнопку ПРОЧИТАТЬ, появится текст правил. В обычном режиме просмотра он не виден.

http://www.elenagrishina.com/p/1_2.html

Совсем недавно я снесла полностью весь шаблон блога, и сейчас многие гаджеты, о которых я писала под тегом blogger - не работают. Но причина не в том, что они кривые, а просто их надо теперь заново ставить, когда сносила, я об этом как-то не подумала)))) теперь делаю это кусочками. 

Код нашла здесь. Переделала его под себя (серый фон заменила на белый, убрала рамку вокруг текста, увеличила шрифт и размер кнопки спойлера).

Мой код получился таким:




<div style="margin: 5px 5px 5px;">
<div class="smallfont" style="margin-bottom: 2px; text-align: center;">
<span style="color: red;"><b>ПРАВИЛА КЛУБА ДРУЗЕЙ :</b></span> <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 = 'Свернуть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Прочитать'; }" style="font-size: 14px; margin: 0px; padding: 0px; width: 100px;" type="button" value="Прочитать" /> </div>

<div class="alt2" style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-size: auto auto; background-attachment: scroll; background-color: white; background-image: none; background-position: 0% 50%; background-repeat: repeat; border: 0px inset; line-height: 1.5em; margin: 0px; padding: 6px;">
<div style="display: none;">

СКРЫТЫЙ ТЕКСТ
<br/>
</div>
</div>
</div>


Много букоф? ну да, зато эффект полезный.
Код нужно вставлять в запись/страницу в режиме HTML (кнопка в верхнем левом углу, рядом с СОЗДАТЬ).

И добавлю пояснения по коду, что и где я поменяла. Этот код не для использования, в нем просто мои пояснения, а копировать и вставлять нужно тот, который выше, или с форума источника.

<div style="margin: 5px 5px 5px;"> отступы
<div class="smallfont" style="margin-bottom: 2px; text-align: center;"> выравнивание по центру
<span style="color: red;"><b>ПРАВИЛА КЛУБА ДРУЗЕЙ :</b></span> цвет шрифта кнопки <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 = 'Свернуть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Прочитать'; }" style="font-size: 14px размер шрифта кнопки; margin: 0px; padding: 0px; width: 100px ширина кнопки;" type="button" value="Прочитать" /> </div>

<div class="alt2" style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-size: auto auto; background-attachment: scroll; background-color: white; background-image: none; background-position: 0% 50%; background-repeat: repeat; border: 0px убрала рамку inset; line-height: 1.5em; margin: 0px; padding: 6px;">
<div style="display: none;">

СКРЫТЫЙ ТЕКСТ - заменила на свой ;-)
<br/>
</div>
</div>
</div>


Желаю вам хорошего зимнего дня! ;-)

Проверка:
ПРАВИЛА КЛУБА ДРУЗЕЙ :

СКРЫТЫЙ ТЕКСТ


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

  1. Лена спасибо-преспасибо! Я тоже шаблончик меняла и про девайсы все не подумала... потом еле вспомнила что где брала... Про Спойлер - здОрово, иногда очень хочется что-то вот так оформить. Спасибо :)

    ОтветитьУдалить
  2. Пол года веду блог, ни разу ещё не пользовалась HTML кодами, ни в каком виде, подступиться- страшно))) Срочно нужно что-то делать. Загребу в избранное, буду разбираться. Спасибо, Лена.

    ОтветитьУдалить
  3. Лена- первопроходец, в блогах такой функции ни у кого не видела, но теперь, когда все разжевано, уверена, многие ей воспользуются......я вот точно воспользуюсь!!!! Спасибушко огромное!!!!!

    ОтветитьУдалить
  4. Какая полезная штука! Спасибо, Лена! Давно искала нечто подобное

    ОтветитьУдалить
    Ответы
    1. я верно поняла, что вместо "скрытого текста" пишу свой? Пробую так делать - не прячется текст :(

      Удалить
    2. только что проверила в самом тексте сообщения - в самом низу. все работает. Текст меняем на свой тоже в режиме HTML.

      Удалить
    3. Попробую еще раз вечером и отпишусь, спасибо!

      Удалить
  5. Спасибо большое! Классная приколюшка, обязательно попробую!

    ОтветитьУдалить
  6. Хорошая штука! Пытаюсь щас себе установить. Более-менее разобралась. Правда вот слово "Свернуть" не появляется почему-то вместо "Прочитать" при открывании спойлера. С этими кодами вечно вот так получается :)

    ОтветитьУдалить

Спасибо за Ваш комментарий! ❤️