Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X

Блок Показать/Скрыть

spoiler

spoiler

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

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>

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

Исходники

(Если вы хотите стилизировать под свой сайт, обращайтесь)

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

One thought on “Блок Показать/Скрыть”

  1. Ernest:

    Кстати стили не понадобились все и так прекрасно работает, спасибо!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X