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

Функция "Показать/Скрыть комментарии" является инструментом, который позволяет пользователю скрыть или отобразить комментарии в тексте или документе. Когда комментарии скрыты, они не видны для читателя, и текст выглядит более компактным. Однако пользователь может просмотреть комментарии, кликнув на специальную кнопку или выбрав соответствующую опцию в программном обеспечении. Это удобно, когда нужно скрыть комментарии для улучшения читабельности текста или же показать комментарии для проверки правильности или просмотра дополнительной информации.
Читайте подробнее на АйБро: 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; } 

Результат