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

Спойлер - очень частое явление на сайтах. С его помощью скрывают объёмные части теста, чтобы придать статье более аккуратный вид. В общем-то спойлеров развелось довольно много, об одном я даже писал (на тот момент я не планировал вести блог и делал краткие записки).

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

Смотрим дему ↓

Наверное читатели заметили, что я взял "отпуск", и посты стали выходить значительно реже. И даже вроде как автор, в моём лице, забросил блог.
На самом деле мой отпуск проходит в режиме экстренного ремонта квартиры. Это такая ситуёвина, когда надо срочно обустроить жильё (причём ремонта требует абсолютно всё, от сантехники, полов, балкона до окон и входной двери), потому что скоро (тянуть дальше некуда) предстоит переезд и таскание барахла (уже подыскал таджиков). Начало положено: интернет провёл, блог не брошу, на все комментарии отвечаю :-).

Реализация ↓
Наверняка вы уже догадались, что сейчас будет ковёр стилей и маленькая фитюлька кода спойлера.
Да, так оно и есть.
Теперь немного отвлечёмся и посмотрим на сайт спонсора:

Rusandroid.org - это самый разнообразный и бесплатный софт для мобильной ОС Android: утилиты, приложения, игры, обои. Также советую посмотреть, как сделано меню на этом сайте.

Возвращаемся к созданию спойлера.
Нужно:
1) jQuery - библиотека должна быть прописана в шаблоне Blogspot, это уже стандарт. Если ссылка ещё не стоит в шаблоне, рекомендую использовать репозиторий скриптов Яндекса, у него самая хорошая отдача.

2) Стили.
У меня есть генератор css кнопок в блоге, поэтому внешний вид кнопки я сотворил именно там.
Использованные в демонстрации стили:

<style type="text/css">
input[type="button"] {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   text-decoration: none;
   vertical-align: middle;
   }
input[type="button"]:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
input[type="button"]:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }
#spo {
   border-top-color: #f0f5f5;
   background: #f0f5f5;
   color: gray;
   }
</style>

Где:
input[type="button"] - оформление кнопки по умолчанию
input[type="button"]:hover - оформление кнопки при касании
input[type="button"]:active - оформление кнопки при нажатии
#spo - область, содержимое спойлера

Стили не надо таскать на каждой странице, достаточно один раз скопировать в css область шаблона и забыть про них.

4) Код спойлера:

<input onclick="$('#spo').toggle(500)" type="button" value="спойлер" />
<div id="spo" style="display: none; > сюда помещается то, что необходимо скрыть
</div>

Где:
toggle(500) - скорость "открывания" спойлера (рекомендую поиграться с цифрами: на высоких значениях (1500) текст выстраивается побуквенно, на низких значениях (50) показывается моментально)

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