Плавный jQuery-спойлер на сайте

Спойлер на сайте – эта такая часть информации, которая скрыта от взора читателя до тех пор, пока он сам не захочет её прочитать. Сделать его совсем не трудно, много с кодом работать не придется. Демо простейшего спойлера можете посмотреть здесь.

Вот код непосредственно самого спойлера. Его нужно разместить там, где спойлер и будет находиться:

<div class="spoiler-wrapper"> <div class="spoiler folded"><a href="javascript:void(0);">Текст - заголовок спойлера</a></div> <div class="spoiler-text">Текст, размещенный внутри спойлера.</div> </div>

А вот этот код необходимо разместить между тегами head:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript">// <![CDATA[ jQuery(document).ready(function(){ jQuery('.spoiler-text').hide() jQuery('.spoiler').click(function(){ jQuery(this).toggleClass("folded").toggleClass("unfolded").next().slideToggle() }) }) // ]]></script>

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

Для того, чтобы оформить спойлер, как в демонстрационном варианте, необходимо в css добавить следующие стили:

.spoiler a{ font-size: 22px; color: #000000; border-bottom: #000000 dashed 2px; text-decoration: none; }   .spoiler:hover { cursor: pointer; }   .spoiler-text { margin: 15px 25px; font-size: 18px; }

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

источник