Service Filter

https://www.awesomescreenshot.com/video/3075020?key=60ee7802b59aa9042128db94c23ecc2f

  

    

      
{{ module.title }}
      

        

        + Add  Filter
        

          

            
            {% for item in module.service_type %}
            
            {% endfor %}
          
          

            

              Cancel
              Apply Filters 
            
          
        
      
      

    
  
  

      {% for item in module.service_type %}
      

        

          

            
{{ item.Title }}
          
          

            {% for item2 in item.services %}
            

              

                {% if item2.image_field.src %}
                

                  {% set sizeAttrs = 'width="{{ item2.image_field.width }}" height="{{ item2.image_field.height }}"' %}
                  {% if item2.image_field.size_type == 'auto' %}
                  {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
                  {% elif item2.image_field.size_type == 'auto_custom_max' %}
                  {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ item2.image_field.max_width }}px; max-height: {{ item2.image_field.max_height }}px"' %}
                  {% endif %}
                  {% set loadingAttr = item2.image_field.loading != 'disabled' ? 'loading="{{ item2.image_field.loading }}"' : '' %}
                  
                
                {% endif %}
                
{{ item2.service_name }}
                
{{ item2.service_content }}
                

                  

                    {% cta guid="{{ item2.cta_1 }}" %}
                  
                  

                    {% cta guid="{{ item2.cta_2 }}" %}
                  
                
              
            
            {% endfor %}
          
        
      
      {% endfor %}
    

Script

$('.filter_group span.text').click(function(){
   $(this).next().show(500);
   $('.filter_group').addClass('filter-open')
})
$('.cancel-button').click(function(){
   $('.button_container button').removeClass('is-checked') ;  
   $('.services-group .button_group').fadeOut();
   $('.filter_group').removeClass('filter-open')
   $grid.isotope({ filter: filters.join(',') });
});
var $output = $('#output');
$('.apply-button').click(function(){
   var _buttons = [];
   $('#output .button').each(function(){
      $(this).remove();
   })
   $('.services-group .button_group').fadeOut();
   $('.filter_group').removeClass('filter-open');
   $('#filters .button_container .button').each(function(event){
      $this = $(this);
      if( $(this).hasClass('is-checked') ){
         $output.append($(this).clone())
      }
   })
   $('.button_container button').removeClass('is-checked') ;
   $grid.isotope({ filter: filters.join(',') });
})

var qsRegex;
var buttonFilter;

var $grid = $('.grid').isotope({   
   itemSelector: '.element-item',
   layoutMode: 'fitRows',
   filter: function() {
      var $this = $(this);
      var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
      var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
      return searchResult && buttonResult;
   }
});

// store filter for each group
var filters = [];

var inclusives = []

$('#filters').on( 'click', 'button', function( event ) {
   var $target = $( event.currentTarget );
   $target.toggleClass('is-checked');
   var isChecked = $target.hasClass('is-checked');
   var filter = $target.attr('data-filter');
   if ( isChecked ) {
      addFilter( filter );
      // $output.append( event.target.outerHTML )
   } else {
      removeFilter( filter );
      //      $output.remove( event.currentTarget )
   }
});

// change is-checked class on buttons
function addFilter( filter ) {
   if ( filters.indexOf( filter ) == -1 ) {
      filters.push( filter );
   }
}
function removeFilter( filter ) {
   var index = filters.indexOf( filter);
   if ( index != -1 ) {
      filters.splice( index, 1 );
   }
}

$('#output').on('click', 'button', function(e){
   var that = $(this)
   setTimeout(function(){ 
      that.remove();
      $grid.isotope({ filter: filters.join(',') });
   }, 500);
})

$(document).ready(function(){
   $("#desktop-search button").on("click", function() {
      var _textSea = $('#quicksearch');
      var value = _textSea.val().toLowerCase();
      console.log(value);
      $('.element-item').each(function(){
         $(this).removeClass('hide-items')
         $(this).removeClass('show-items')
      })
      $(".element-item h4").filter(function() {
         $(this).closest('.inner_items').toggle($(this).text().toLowerCase().indexOf(value) > -1);
         $grid.isotope({ filter: filters.join(',') });
      });
      $('.element-item').each(function(){
         if( $(this).height() < 120 ) {
            $(this).addClass('hide-items')
         } else {
            $(this).addClass('show-items')
         }
      })
      $grid.isotope({ filter: filters.join(',') });
      $('html, body').animate({
         scrollTop: $("#Service").offset().top
      }, 1000);
   });
});


$(document).ready(function(){
   $("#mobile-search button").on("click", function() {
      var _textSea = $('#mobile_input');
      var value = _textSea.val().toLowerCase();
      console.log(value);
      $('.element-item').each(function(){
         $(this).removeClass('hide-items')
         $(this).removeClass('show-items')
      })
      $(".element-item h4").filter(function() {
         $(this).closest('.inner_items').toggle($(this).text().toLowerCase().indexOf(value) > -1);
         $grid.isotope({ filter: filters.join(',') });
      });
      $('.element-item').each(function(){
         if( $(this).height() < 120 ) {
            $(this).addClass('hide-items')
         } else {
            $(this).addClass('show-items')
         }
      })
      $grid.isotope({ filter: filters.join(',') });
      $('html, body').animate({
         scrollTop: $("#Service").offset().top
      }, 1000);
   });
});