Сворачивание полей в фильтре

<div class="widget_content_filter">
	<div class="filter-container">
		<form action="<?php echo $page_url; ?>" method="get" id="<?php echo $form_id; ?>">
			<?php echo html_input('hidden', 'page', 1); ?>
			<div class="fields">
				<?php foreach($fields as $name => $field){ ?>
					<?php $value = isset($filters[$name]) ? $filters[$name] : null; ?>
					<?php $output = $field['handler']->getFilterInput($value); ?>
					<?php if (!$output){ continue; } ?>
 
					<div class="field ft_<?php echo $field['type']; ?> f_<?php echo $field['name']; ?>">
					<input type="checkbox" id="value_spoiler <?php echo $field['name']; ?>" /> 
					<label for="value_spoiler <?php echo $field['name']; ?>" ><?php echo $field['title']; ?></label>
					<div class="value_spoiler">
							<?php echo $output; ?>
						</div>
					</div>
 
 
 
				<?php } ?>
				<?php if (!empty($props)){ ?>
					<?php foreach($props as $prop){ ?>
						<?php $value = isset($filters["p{$prop['id']}"]) ? $filters["p{$prop['id']}"] : null; ?>
                        <?php $output = $prop['handler']->getFilterInput($value); ?>
                        <?php if (!$output){ continue; } ?>
						<div class="field ft_<?php echo $prop['type']; ?> f_prop_<?php echo $prop['id']; ?>">
						<label for="filter_value_spoiler_<?php echo $field['name']; ?>" ><?php echo $prop['title']; ?></label>
						<div class="value_spoiler">
								<?php echo $output; ?>
							</div>
						</div>
					<?php } ?>
				<?php } ?>
			</div>
			<div class="buttons">
				<?php echo html_submit(LANG_FILTER_APPLY); ?>
				<?php if (count($filters)){ ?>
                    <button class="cancel_filter_link"> <a  class="cancel_filter_link" href="<?php echo $page_url; ?>"><?php echo LANG_CANCEL; ?></a></button>
				<?php } ?>
			</div>
		</form>
	</div>
</div>
<?php ob_start(); ?>
<script>
    $(function (){
        icms.forms.initFilterForm('#<?php echo $form_id; ?>');
    });
</script>
<?php $this->addBottom(ob_get_clean()); ?>
 
 
 
 
 
 
 
 
 
<style>
	.cancel_filter_link:hover{
		color: white;
		text-decoration: none;
 
	}
	.cancel_filter_link{
		background: red;
		color: white;
		text-decoration: none;
		float: right;
	}
input[id^="value_spoiler"]{
 display: none;
}
input[id^="value_spoiler"] + label {
 display: block;
 width: 100%;
 margin: 0 auto;
 padding: 5px 20px;
 background: black;
 color: #fff;
 text-align: center;
 font-size: 24px;
 border-radius: 8px;
 cursor: pointer;
 transition: all .6s;
}
input[id^="value_spoiler"] + label:after{
	content: '\e85a';
	font-family: 'fontello';
	float: right;
	transition: all .2s;
}
input[id^="value_spoiler"]:checked + label {
 color: black;
 background: #ccc;
}
input[id^="value_spoiler"]:checked + label:after{
	content: '\e85d';
	font-family: 'fontello';
	float: right;
	transition: all .2s;}
 
input[id^="value_spoiler"] ~ .value_spoiler {
 width: 95%;
 height: 0;
 overflow: hidden;
 opacity: 0;
 color: black;
 margin: 5px auto 0; 
 padding: 5px; 
 background: #eee;
 border: 1px solid #ccc;
 border-radius: 8px;
 transition: all .6s;
}
input[id^="value_spoiler"]:checked + label + .value_spoiler{
 height: auto;
 opacity: 1;
 display: flex;
 padding: 5px;
}
</style>