<section>
<h2 class="widget-title">фильтр</h2>
<div class="filter filter--style-premmerce" >ЭТА НАДА ПОКАЗАТЬ - А ПРИ ДРУГОМ КЛИКЕ скрыть
</div>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
.filter--style-premmerce{
display:none;
}
.widget-title:after
{
content:"открыть фильтр";
font-size: 25px;
background: aqua;
padding-left: 10px;
color: red;
}
.widget-title.active:after
{
content:"закрыть фильтр";
}
$(document).ready(function(){
$(".widget-title").click(function(){
if ( $(".widget-title").hasClass('active') ) {
$('.filter').slideUp('slow', function(){
$(".widget-title").removeClass('active');
});
}
else {
$('.filter').slideDown('slow', function() {
$(".widget-title").addClass('active');
});
}
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.