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


<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>

.slicont {width: 200px; cursor: pointer; display: none;}
.InStyle {width: 200px; cursor: pointer;}
Step . 1
Уберём стандартную кнопку спойлера и поставим свою, изображение butt00.png. Сразу пропишем стиль кнопки , ширину , высоту и для того что бы изображение кнопки под ссылкой не окружала рамка пропишем нулевой бордюр . Прописываем стиль кнопки классом .imgbott и заносим его в CSS таблицу .
В итоге получаем :

В итоге получаем :
- Все изменения CSS и HTML выделяются .
-
Вид спойлера .
Вид спойлера .


Плавно раскрываемое содержаниe

<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>

.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;}

В итоге получаем :
Вид спойлера .


Плавно раскрываемое содержаниe

.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;}
