Оптимизировать вид фильтра

[Kami]

Друзья , хочу оптимизировать фильтр ( пример как на скрине)

 

Интересует как сделать чтоб 4 свойства выводились а снизу была ссылка( еще варианты)

а при нажатии выезжал список с остальными свойствами.

 

Вот код примерно накидал, но как сделать чтоб остальные были под хайдом а при нажатии на ссылку раскрывались.

 

 

                   {assign var=max_options value=4}
                {foreach $f->options as $k=>$o}
                    <li>
                    <input type="checkbox" id="{$f->id}pai_{$o@iteration}" name="{$f->id}[]" {if $filter_features.{$f->id} && in_array($o->value,$filter_features.{$f->id})}checked="checked"{/if}  value="{$o->value|escape}" />
                    <label for="{$f->id}pai_{$o@iteration}">{$o->value|escape}</label>
       </li>

                                {if $o@iteration >= $max_options || $o@last}
                                   <br> <a class="all" href="">Посмотреть все</a>

                                {/if}
{/foreach}

 

       

 

Изменено 14 января, 2018 пользователем Kami

[MStyle28]

Как вариант сделать через js

Пример https://jsfiddle.net/j7ahj2f1/

[Kami]

Как вариант сделать через js

Пример https://jsfiddle.net/j7ahj2f1/

 

Спасибо, вариант хороший. Я почему то через смарти хотел заморочиться.

[Kami]

Как вариант сделать через js

Пример https://jsfiddle.net/j7ahj2f1/

еще вопрос, а как сделать чтоб открывался каждый блок отдельно?

[MStyle28]

еще вопрос, а как сделать чтоб открывался каждый блок отдельно?

 

HTML

 

<div>
    <ul id="list_1">
        <li>Пункт 1</li>
        <li>Пункт 2</li>
        <li>Пункт 3</li>
    </ul>
</div>

<div>
    <ul id="list2">
        <li>Пункт 1</li>
        <li>Пункт 2</li>
        <li>Пункт 3</li>
    </ul>
</div>

JS подключаем плагин Collapsorz и пишем js

$(function() {
    $("#list_1").collapsorz({
        minimum: 2
        , showText: "Показать все"
        , hideText: "Скрыть"
    });
    
    $("#list_2").collapsorz({
        minimum: 2
        , showText: "Показать все"
        , hideText: "Скрыть"
    });
});

Как-то так.

[Kami]

HTML

 

<div>
    <ul id="list_1">
        <li>Пункт 1</li>
        <li>Пункт 2</li>
        <li>Пункт 3</li>
    </ul>
</div>

<div>
    <ul id="list2">
        <li>Пункт 1</li>
        <li>Пункт 2</li>
        <li>Пункт 3</li>
    </ul>
</div>

JS подключаем плагин Collapsorz и пишем js

$(function() {
    $("#list_1").collapsorz({
        minimum: 2
        , showText: "Показать все"
        , hideText: "Скрыть"
    });
    
    $("#list_2").collapsorz({
        minimum: 2
        , showText: "Показать все"
        , hideText: "Скрыть"
    });
});

Как-то так.

 это я понимаю как делать. Мне не понятно как это в цикл вывода параметров свойства поставить.

[Maksclub]

 это я понимаю как делать. Мне не понятно как это в цикл вывода параметров свойства поставить.

 

нужно перевести разметку с id на class, типа такого class="list__features"

 

и js код тогда  сокраится и его просто вставить в файл с js:

 

$(function() {
    $(".list__features").collapsorz({
        minimum: 2, 
        showText: "Показать все", 
        hideText: "Скрыть"
    });
});
 

Изменено 15 января, 2018 пользователем Maksclub

[Kami]

 

нужно перевести разметку с id на class, типа такого class="list__features"

 

и js код тогда  сокраится и его просто вставить в файл с js:

 

$(function() {
    $(".list__features").collapsorz({
        minimum: 2, 
        showText: "Показать все", 
        hideText: "Скрыть"
    });
});
 

 

так если каждому параметру присвоить  list__features

 

то при открытии одного , будут открываться все .

[Maksclub]

так если каждому параметру присвоить  list__features

 

то при открытии одного , будут открываться все .

 

тогда нужно повсить на событие и  $(".list__features") заменить на  $(this)

Изменено 15 января, 2018 пользователем Maksclub

[MStyle28]

У меня с вариантом от Макса работают каждый отдельно:

https://yadi.sk/d/BjH2uFaV3RTRSG

[Kami]

У меня с вариантом от Макса работают каждый отдельно:

https://yadi.sk/d/BjH2uFaV3RTRSG

Да все работает , спасибо! Моя невнимательность была!