Блок Показать/Скрыть (спойлер)
Если вам понадобился блок который нужно скрывать или показывать при нажатии кнопки, другими словами спойлер, то я вам расскажу об одном из удобных и простом в использовании скриптов.
1.И так первое что нам нужно это подключить как всегда библиотеку jquery, у вас скорей всего она уже должна быть подключена, а если нет то подключаем прямо с Google. Делаем это так, вставляем между тегами <HEAD></HEAD> скрипт:
<script type=»text/javascript» src=»http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js»></script>
2.Подключаем стили нашего спойлера :
.home_slider_cont {width: 640px; height: 265px; position: relative;}
.slider_control {position: absolute; top: 72px; left: 0px; width: 20px; background: url(../images/sl_cont_bg_top.png) top left no-repeat; padding-top: 19px; z-index: 999;}
.slider_control_cont {width: 20px; background: url(../images/sl_cont_bg_bottom.png) bottom left no-repeat; padding-bottom: 19px;}
.slider_control_cont_inner {background: url(../images/sl_cont_bg.png) left repeat-y;}
.slider_control_cont_inner ul {margin: auto 0; padding: 5px 0 5px 0; list-style: none;}
.slider_control_cont_inner ul li {padding: 4px 0 4px 0px;}
.slider_control_cont_inner ul li a {
width: 7px;
height: 7px;
display: block;
background: url(../images/slider_control.png);
text-decoration: none;
}
.slider_control_cont_inner ul li.active a, .slider_control_cont_inner ul li a:hover {background: url(../images/slider_control_a.png);}
.slider_body {position: relative; width: 640px; height: 265px; overflow: hidden;}
.slider_body_item {position: absolute; width: 640px; height: 265px; top: 0px; left: 0px;}
.slider_item {display: none;}
.slider_item_small {
display: none;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
color: #666;
z-index: 900;
position: absolute;
left: 0px;
top: 0px;
width: 170px;
padding: 10px 10px 10px 20px;
}
.slider_body_small {
position: absolute;
left: 0px;
top: 75px;
background: white;
width: 188px;
height: 150px;
display: none;
}
.sl_sm_n a {
font-size: 14px;
font-family: 'PT Sans Caption', sans-serif;
font-weight: bold;
color: #555;
}3. А далее просто вставляем код спойлера в нужном вам месте:
<div class=»vid_comments_head» style=»margin: 0 auto; width: 300px;»>
<a href=»javascript: void(0);» class=»com_show» onclick=»$(function(){$(‘.comments_container’).fadeOut(500); $(‘.com_hide’).fadeIn(0); $(‘.com_show’).fadeOut(0);})»>Скрыть комментарии (4)</a>
<a href=»javascript: void(0);» class=»com_hide» onclick=»$(function(){$(‘.comments_container’).fadeIn(1000); $(‘.com_show’).fadeIn(0); $(‘.com_hide’).fadeOut(0);})» style=»display:none;»>Показать комментарии (4)</a>
</div>
<div class=»comments_container» style=»margin: 30px auto; width: 300px; border: 3px dashed #7D26CD; color: #7D26CD; padding:20px;»>
Здесь ваш текст или еще что-то
</div>
Пример вы можете посмотреть по этой ссылке
