Jquery slideToggle() accordion style menus

custom.js

$(document).ready(function() {
	$('.price-range-lg').hide();
	$('.price-range').hide();
	$('.filter').css('display','none');
	$('.filter-remove').each(function(){		
		var showfilters = $(this).attr('data-filtercode');
		$('.filter-title[data-filtercode="'+showfilters+'"]').click();
	});
});
$('.filter-title').click(function(){
 var filtercode = $(this).attr('data-filtercode')
   $('.filter[data-filtercode="'+filtercode+'"]').slideToggle();
     if ($("i", this).hasClass("fa-angle-down")) {
       $("i", this).removeClass('fa-angle-down').addClass('fa-angle-up');
     }
     else {
       $("i", this).removeClass('fa-angle-up').addClass('fa-angle-down');
   	}
});
$('.filter-title[data-filtercode=price]').click(function(){
 $(this).next('.price-range').toggle();
   if ($("i", this).hasClass("fa-angle-down")) {
     $("i", this).removeClass('fa-angle-down').addClass('fa-angle-up');
   }
   else {
     $("i", this).removeClass('fa-angle-up').addClass('fa-angle-down');
   }
});
$('.filter-title[data-filtercode=price-lg]').click(function(){
 $(this).next('.price-range-lg').toggle();
 if ($("i", this).hasClass("fa-angle-down")) {
     $("i", this).removeClass('fa-angle-down').addClass('fa-angle-up');
   }
   else {
     $("i", this).removeClass('fa-angle-up').addClass('fa-angle-down');
   }
});

sidebar.template.html

give the titles and the filters thier respective classes: filter-title and variationfilter
give them a data-filtercode attribute that is equal to the [@specifc_i@] so that as it loops through specifics
it allocates a unique identified shared by both the title and it's appropriate values for the filter.


<ul id="filters" class="panel-collapse collapse list-group">
				[%PRODUCT_FILTER type:'variations' autohide:'0'%]
					[%PARAM *header%]
						[%DATA id:'activecount' if:'>' value:'0'%]
							[%PARAM *if_true%]
								<a href="[@remove_url@]" class="pull-right"> clear</a>
							[%END PARAM%]
						[%END DATA%]
						<li class="list-group-item filter-title" data-filtercode="[@specific_id@]"><h4>Filter By [@filter_name@]</h4></li>
					[%END PARAM%]
					[%PARAM *body%]
						[%DATA id:'selected' if:'==' value:'1'%]
							[%PARAM *if_true%]
								<li class="filter-remove filter variationfilter" data-filtercode="[@specfic_id@]"><a href="[@remove_single_url@]" class="list-group-item" rel="nofollow">
									[@name@] <span class="text-muted"></span></a>
									[%SITE_VALUE id:'filterthing'%]a[%END SITE_VALUE%]
								</li>
							[%END PARAM%]
							[%PARAM *if_false%]
								<li class="filter variationfilter" data-filtercode="[@specific_id@]">
									<a class="list-group-item" href="[@url@]"> [@name@] <span class="text-muted"></span></a>
								</li>
							[%END PARAM%]
						[%END DATA%]
					[%END PARAM%]
				[%END PRODUCT_FILTER%]