Раскрытие оставшихся карточек товара при клике?

Question

[DanilaBodrov]

Есть 12 карточек товара, хочу чтобы было видно 3 штуки и при клике на текст "показать остальные модели" нужно чтобы открывались следующие 9 карточек. Без клика они должны быть скрыты. Как это реализовывается на html/css/js/jquery? мб есть готовые решения или ссылки на статьи?

Answer 1

[Антон Усачев]

Или выбрать только спрятанные. Можно через класс (как у меня) или через display: none с поиском по :hidden.

Comments

[DanilaBodrov]

Антон, спасибо. Сейчас попробую твой вариант.

[DanilaBodrov]

А скрыть каким методом можно?

[Антон Усачев]

DanilaBodrov, обновил codepen.

Answer 2

[Анатолий Куликов]

Уберите остальные 9 в отдельный блок и скройте его. При нажатии - показывайте.

Answer 3

[alex-1917]

Вы главное планку не загибайте, а то намедни курочили поделие - там 350 товаров выгружаются, затем скрываются стилями и ОПА- легко и непринужденно реализуется эффект "Смотреть еще..."
Правда, до того, как, надо перед экраном ожидаючи посидеть минут пять)))