Показать/Скрыть комментарии

Функция "Показать/Скрыть комментарии" является инструментом, который позволяет пользователю скрыть или отобразить комментарии в тексте или документе. Когда комментарии скрыты, они не видны для читателя, и текст выглядит более компактным. Однако пользователь может просмотреть комментарии, кликнув на специальную кнопку или выбрав соответствующую опцию в программном обеспечении. Это удобно, когда нужно скрыть комментарии для улучшения читабельности текста или же показать комментарии для проверки правильности или просмотра дополнительной информации.
Читайте подробнее на АйБро: https://aibro.io

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<H1>Спойлер</H1>
<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>

CSS

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

Результат