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

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

Пример:

Текст - заголовок спойлера

Текст, размещенный внутри спойлера.

Код спойлера нужно разместить там, где будет находиться

Шаг 1) добавить HTML:

<div class="spoiler-wrapper">

<div class="spoiler folded"><a href="javascript:void(0);">Текст - заголовок спойлера</a></div>

<div class="spoiler-text">Текст, размещенный внутри спойлера.</div>

</div>

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

Шаг 2) добавить CSS:

<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 a:hover {text-decoration: none;}

.spoiler-text {max-width:100%;margin: 15px 25px;font-size: 18px;}

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