toggle show and hide - shows but doesn't hide

toggle show and hide - shows but doesn't hide

here is my html 
  2. <div id="space_manager_saved_search_selection">
  3.   <div class="saved_filter_tile firstfour" data-filter-id="5">
  4.   <h5>john</h5>
  5.   </div>
  6.   <div class="saved_filter_tile firstfour" data-filter-id="9">
  7.   <h5>christine</h5>
  8.   </div>
  9.   <div class="saved_filter_tile firstfour" data-filter-id="10">
  10.   <h5>christine1</h5>
  11.   </div>
  12.   <div class="saved_filter_tile firstfour" data-filter-id="12">
  13.   <h5>johndc</h5>
  14.   </div>
  15.   <div class="saved_filter_tile afterfour" data-filter-id="13">
  16.   <h5>here is the 5th one</h5>
  17.   </div>
  18.   <div class="saved_filter_tile afterfour" data-filter-id="14">
  19.   <h5>6th one here</h5>
  20.   </div>
  21. </div>

here is my jQuery

$( '.show_more_saved'). off(). on( "click", $. proxy( function(){
                 $( '.saved_filter_tile.afterfour'). css( 'display', 'flex');
                 $( '.show_more_saved'). text( $( '.show_more_saved'). text(). replace( "View more", "View less"));
                 $( '.show_more_saved'). addClass( 'show_less_saved');
                 $( '.show_more_saved'). removeClass( 'show_more_saved');
            }, this));

             $( '.show_less_saved'). off(). on( "click", $. proxy( function(){
                 console. log( 'hello');
                 $( '.saved_filter_tile.afterfour'). css( 'display', 'none');
                 $( '.show_less_saved'). text( $( '.show_less_saved'). text(). replace( "View less", "View more"));
                 $( '.show_less_saved'). addClass( 'show_more_saved');
                 $( '.show_less_saved'). removeClass( 'show_less_saved');
            }, this));

I can show more but I can't hide them?!
Please help