Читайте подробнее на АйБро: 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; } Результат