Как лучше раскрыть весь список по кнопке?

Question

[Jack OXO]

Есть вот такой список моделей:

На этом сайте у скрытых li'шек стоит style="display: none;" и по клику на ссылку "показать все модели", значение атрибута style меняется на display="list-item". Это вообще правильный подход? Какое для такого действия самое подходящее решение? Спасибо.

Answer 1

[Jack OXO]

Сделал как на сайте (по коду думаю поймете):

$(document).ready(function(){ 
	var size = $('.model-list-block').find('li').length();
    $('.model-list-all').hide();
    if (size > 20) {
        $('.model-list-block').find('li').slice(20, size).hide();
        $('.model-list-all').show();
    }
    $('.model-list-all').on('click', function () {
        $('.model-list-block').find('li').slice(20, size).show();
        $(this).hide();
    });
)}

Answer 2

[dollar]

А почему не показать все модели сразу? Зачем лишний клик?
Я понимаю, если бы вы в кратком списке показывали только самые популярные модели, но вы их показываете по алфавиту.

Вообще, если моделей слишком много, то не лучше ли подгрузить их отдельным ajax-запросом?

Comments

[Jack OXO]

Потому что внизу другие важные блоки, портянка не нужна. Их не так много, до 200 штук.

Answer 3

[tuxx]

Лучше показывать через анимацию высоты у ul

Comments

[Jack OXO]

Это как? Должна быть фикс. высота что ли?

[tuxx]

Почти. Ограничивается через max-height с большим значением.
пример

Answer 4

[Амир Алимжанов]

Можно при выборе всех дать обёртке класс .show-all при котором все li display: list-item

Comments

[Jack OXO]

Можете поподробнее объяснить, не понимаю, изначально как скрыть ненужные li?