Как сделать спойлер скрывающий и открывающий текст?
 

Есть три абзаца текста, за ними идут картинки.
как сделать спойлер, чтобы показывался один абзац и при наведении на него появлялись еще два и соответственно когда убрать курсор с них, чтобы вернулось как было до наведения.
Когда появятся те 2 абзаца,картинки должны уйти в низ.
желательно плавное появление и исчезание.
Спасибо..помогите.
вот что смог сам сделать.

jQuery(document).ready(function(){
		// Скрываем все спойлеры
		jQuery('.spoiler-body').hide()
		// по клику отключаем класс folded, включаем unfolded, затем для следующего
		// элемента после блока .spoiler-head (т.е. .spoiler-body) показываем текст спойлера
		jQuery('.spoiler-head').mouseover(function(){
			jQuery(this).toggleClass("folded").toggleClass("unfolded").next().slideToggle()
		})
	});

</pre>
<div class="spoiler-wrap">
<div class="spoiler-head folded">Внимание, спойлер!</div>
<div class="spoiler-body">Курсор находится в пределах границ элементаКурсор находится в пределах границ элементаКурсор находится в пределах границ элем</div>
</div>
<pre>

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