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

Изначальный HTML спойлера .

---

<script type="text/javascript">
$(document).ready(function(){$('.sliEsq').click(function(){$(this).parent().children('.sliesQ').toggle('slow');return false;});});
</script>
<div>
<a title="Click" href="javascript://" class="sliEsq">
<input value="Название , заголовок спойлера" type="button" class="InStyle"></a>
<div class="sliesQ slicont"><img alt="" src="http://runettex.clan.su/FPC/FPOptic.jpg" style="width: 200px;"><br>Плавно раскрываемое содержаниe</div>
</div>

---

Начальная CSS спойлера .

---

.slicont {width: 200px; cursor: pointer; display: none;}
.InStyle {width: 200px; cursor: pointer;}

---

HTML спойлера .

---

<script type="text/javascript">
$(document).ready(function(){$('.sliEsq').click(function(){$(this).parent().children('.sliesQ').toggle('slow');return false;});});
</script><div class="divsli">
<a title="Click" href="javascript://" class="sliEsq">
<img alt="" src="butt00.png" class="imgbott">
<span class="spansli">название спойлера</span>
</a>
<div class="sliesQ"><img alt="" src="butt02.png" class="imgbott"></div>
</div>

---

CSS спойлера .

---

.slicont {width: 200px; cursor: pointer; display: none;}
.imgbott {width: 200px; height: 20px; border: 0px;}
.divsli {position: relative; top: 0px; left: 0px; border: 1px #ff0 solid;}
.spansli {position: absolute; top: 0px; left: 0px; font: bold 10pt Tahoma, sans-serif; text-align: center; border: 1px #f00 solid;}

---

CSS спойлера .

---

.slicont {width: 200px; cursor: pointer; display: none;}
.imgbott {width: 200px; height: 20px; border: 0px;}
.divsli {position: relative; top: 0px; left: 0px; width: 200px;}
.spansli {position: absolute; top: 0px; left: 0px; font: bold 10pt Tahoma, sans-serif; text-align: center; width: 200px;}

---