среда, 7 января 2015 г.

Спойлер

 Что такое спойлер (англ. spoiler) для блога
Спойлер это элемент дизайна блога,  используется для сокрытия информации, которую читатель может увидеть лишь  нажав на кнопку. Это быть полезно:



  •  если спрятанную под спойлером информацию не нужно видеть всем
  •  если текст статьи перемежается большими кусками вспомогательного материала, который не каждому интересен (например, сравнительные таблицы, куски кода, примеры).

Спойлер №1
Spoiler:
Здесь Ваш текст, скрипт или картинка
Код спойлера:
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b>: <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="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Open/Close" /> </div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
 Здесь Ваш текст, скрипт или картинка
<br>
</div>
</div>
</div>
Эксперементируем))) Код спойлера
Spoiler:
В грозы, в бури, В житейскую стынь, При тяжелых утратах И когда тебе грустно, Казаться улыбчивым и простым — Самое высшее в мире искусство. © авторство неизвестно
Вроде как получилось))) Но не особо нравится... и зачем оно мне не знаю...

Появилось желание разобраться в CSS свойствах, в данном примере :
margin: 5px 20px 20px