<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');
      });
    }

  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.