Простой спойлер

Спойлер для установки на сайт или блог

Самый простой спойлер для Вашего сайта или блога, работает всего на одном свойстве селекторов CSS. Вы можете установить два, три, 100 и более спойлеров на странице. В качестве кнопки спойлера может использоваться, текст, картинка, флеш и любой другой элемент который Вам нужен. Для установки нескольких спойлеров на одной странице измените цыфру после дефиса по порядку от 1 до бесконечности. Для работы спойлера понадобится подключенная библиотека jOuery, на сайте юКоз она есть по умолчанию.

Скрипт спойлера с текстом вместо кнопки

<style> [class|="dsspoiler"]{display:none;} </style> <a href="#" onclick="$('.dsspoiler-1').toggle();return false;"> Открыть спойлер </a> <div class="dsspoiler-1"> Здеся то что изначально скрыто </div>
Открыть спойлер

Здеся то что изначально скрыто

Скрипт спойлера с картинкой вместо кнопки

<style> [class|="dsspoiler"]{display:none;} </style> <a href="#" onclick="$('.dsspoiler-1').toggle();return false;"> <img src="http://www.yandex.ru/cycounter?http://delaisait.ucoz.ru/" alt="ТиЦ" /> </a> <div class="dsspoiler-1"> Здесь то что скрыто </div>

Здесь то что скрыто

Установка нескольких спойлеров на странице

<style> [class|="dsspoiler"]{display:none;} </style> <a href="#" onclick="$('.dsspoiler-1').toggle();return false;"> Открыть спойлер </a> <div class="dsspoiler-1"> Здесь скрытое содержимое </div> <br> <a href="#" onclick="$('.dsspoiler-2').toggle();return false;"> <img src="http://www.yandex.ru/cycounter?http://delaisait.ucoz.ru/" alt="ТиЦ" /> </a> <div class="dsspoiler-2"> Здесь скрытое содержимое </div> <br> <a href="#" onclick="$('.dsspoiler-3').toggle();return false;"> <script src="http://delaisait.ucoz.ru/media/?t=video;w=100;h=100;f=http%3A%2F%2Fdelaisait.ucoz.ru%2Fflash%2Fzoo%2Fzoo_3.swf" type="text/javascript"></script> </a> <div class="dsspoiler-3"> Здесь скрытое содержимое </div>

Открыть спойлер

Здесь скрытое содержимое

Здесь скрытое содержимое

Здесь скрытое содержимое

источник