Посмотрите специальные предложения для летнего отдыха!

Александр Харитонов

Плавный 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 иногда поражают воображение, но моей задачей было рассказать о простейшем спойлере, который может понадобиться в любую минуту. Демонстрацию можете посмотреть здесь.

Теги: ,