Закрытый вид:
Открытие 1 характеристика:
Решение просто со стандартным кодом немного CSS и JS
Сам фильтр вывод куда хотите:
Код: Выделить всё
<div class="col-lg-12 bg-filter">
{if $features}
{foreach $features as $key=>$f}
<div class="filter-test">
<a href="" class="spoiler-trigger">
<span class="padding-left" data-feature="{$f->id}">{$f->name}</span>
</a>
<div class="spoiler-block">
<div class="filter-text-test">
<div class="bx_filter_head">
{foreach $f->options as $o}
<div class="bs-filter-left">
<input onchange="window.location.href='{furl params=[$f->url=>$o->translit, page=>null]}'" type="checkbox"{if $smarty.get.{$f@key} && in_array($o->translit,$smarty.get.{$f@key})} checked{/if}/>
<span class="c-indicator"></span>
{$o->value|escape}
</div>
{/foreach}
</div>
</div>
</div>
</div>
{/foreach}
{/if}
</div>На главную страницу вставляйте:
Код: Выделить всё
<script>
$(document).on('click', '.spoiler-trigger', function(e) {
e.preventDefault();
if ($(this).hasClass('active')){
$('.spoiler-trigger.active').parent().find('.spoiler-block').first().slideToggle(300);
$('.spoiler-trigger.active').removeClass('active');
}
else{
$('.spoiler-trigger.active').parent().find('.spoiler-block').first().slideToggle(300);
$('.spoiler-trigger.active').removeClass('active');
$(this).addClass('active');
$(this).parent().find('.spoiler-block').first().slideToggle(300); }
})
</script>Ну и сам вид его, накидал обычно:
Код: Выделить всё
.spoiler-trigger {
color: #830707;
text-decoration: none;
padding-left: 15px;
}
.spoiler-trigger.active {
background: #830707;
color: #fff;
padding: 10px;
}
.spoiler-trigger {
background: #243541;
color: #fff;
padding: 5px;
}
.spoiler-trigger:hover>span {}
.spoiler-block {
height: 230px;
display: none;
position:absolute;
z-index: 999;
left:0;
width: 100%;
background: #830707;
color: #fff;
}
.spoiler-block ul {
display: -webkit-box;
}
.spoiler-block ul li {
list-style-type: none;
padding: 5px;
background: #243541;
color: #fff;
}
.filter-test {
padding: 1px;
float: left;
}
.padding-left {
padding: 10px 10px;
}
.filter-text-test{
padding: 15px;
font-size: 15px;
top: 10px;
position: relative
}
.clear{clear:both;}
.bg-filter{
height: 85px;
background-color: #f8f8f8;
padding: 15px;
}
.bs-filter-left{
float: left;
width: 25%;
}
Если надо вывести так же БРЕНД:
Код: Выделить всё
{if $category->brands}
<div class="filter-test">
<a href="" class="spoiler-trigger">
<span class="padding-left" data-language="{$translate_id['features_manufacturer']}">{$lang->features_manufacturer}</span>
</a>
<div class="spoiler-block">
<div class="filter-text-test">
<div class="bx_filter_head">
{foreach $category->brands as $b}
<div class="bs-filter-left">
<input onchange="window.location.href='{furl params=[brand=>$b->url, page=>null]}'" type="checkbox"{if $brand->id == $b->id || $smarty.get.b && in_array($b->id,$smarty.get.b)} checked{/if}/>
<span class="c-indicator"></span>
{$b->name|escape}
</div>
{/foreach}
</div>
</div>
</div>
</div>
{/if}Есть один нюанс, если много свойств, то вылазят за рамку, думаю решится через CSS!!