Site icon Vavik96

Блок Показать/Скрыть (спойлер)

admin

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

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>

Пример вы можете посмотреть по этой ссылке



Источник

Exit mobile version