Вашему вниманию оригинальный и в тоже время простой скрипт для создания спойлера, который станет по умолчанию скрывать, по при нажатие открываться. Также полевую сторону установлены знаки, как плюс и минус, что соответствует формаций открытие, где идет под минус, что больше сделано для виденье. HTMLКод
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script> <a href="#" class="vukoscam-kugunkanop"><span>Развернуть спойлер</span></a> <div class="loxagtunsa-makanop">Скрытый контент спойлера <br> <img src="http://krasivie-kartinki.ru/images/skazki48.gif" border="0" alt=""> </div>
CSS
Код
.vukoscam-kugunkanop{ color: #0b70db; text-decoration: none; padding-left: 15px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAANUlEQVQoU2PkLrj9n4EAYAQp+jpBlRGXOpA8hiJ0TaQrwuY2kDNINwnmcKLchO5LuHWEwgkAlO5FBwhFaI8AAAAASUVORK5CYII=) no-repeat 0 50%; } .vukoscam-kugunkanop.active{ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKklEQVQoU2PkLrj9n4EAYAQp+jpBlRGXOpA8DRRhcxvIGTSyjqDvCIUTAEcINQcERZkIAAAAAElFTkSuQmCC); } .vukoscam-kugunkanop>span{ border-bottom: 1px dashed #0b70db; padding:0 3px; } .vukoscam-kugunkanop:hover>span{ border-bottom-style: solid; } .loxagtunsa-makanop{ display: none; }
JSКод
$(document).on('click','.vukoscam-kugunkanop',function(e){e.preventDefault();$(this).toggleClass('active');$(this).parent().find('.loxagtunsa-makanop').slideToggle(300);})
Демонстрация